网站建设公司哪家好,wordpress 主题缩略图,品建设,博客网站制作参考文章
CSS Modules 的用法
CSS Modules 的功能很单纯#xff0c;只加入了局部作用域和模块依赖#xff0c;可以保证某个组件的样式#xff0c;不会影响到其他组件。
局部作用域
CSS的规则都是全局的#xff0c;任何一个组件的样式规则#xff0c;都对整个页面有效。…参考文章
CSS Modules 的用法
CSS Modules 的功能很单纯只加入了局部作用域和模块依赖可以保证某个组件的样式不会影响到其他组件。
局部作用域
CSS的规则都是全局的任何一个组件的样式规则都对整个页面有效。
产生局部作用域的唯一方法就是使用一个唯一的 class 的名字不会与其他选择器重名。这就是 CSS Modules 的做法。
示例代码
// index.tsx
import React from react;
import styles from ./index.lessconst Create: React.FC () {return div className{styles.titleName)/div/
}上面代码中将样式文件 index.less 输入到 style 对象然后引用 style.titleName 代表一个 class 。
.titleName {height: 18px;line-height: 18px;border-left: 4px solid #4461eb;font-size: 14px;padding-left: 8px;margin-left: 16px;
}构建工具会将类名 style.titleName 编译成一个哈希字符串。
div classtitleName___ua3pe标题
/divindex.less 也会同时被编译。
.titleName___ua3pe {height: 18px;line-height: 18px;border-left: 4px solid #4461eb;font-size: 14px;padding-left: 8px;margin-left: 16px;
}这样一来这个类名就变成唯一的了只对 Create 组件有效。
CSS Modules 提供各种插件支持不同的构建工具。上面使用的是 Webpack 的css-loader插件因为它对 CSS Modules 的支持最好而且很容易使用。
下面是这个示例的 webpack.config.js 。
module.exports {entry: __dirname /index.js,output: {publicPath: /,filename: ./bundle.js},module: {loaders: [{test: /\.jsx?$/,exclude: /node_modules/,loader: babel,query: {presets: [es2015, stage-0, react]}},{test: /\.css$/,loader: style-loader!css-loader?modules},]}
};上面代码中关键的一行是style-loader!css-loader?modules它在css-loader后面加了一个查询参数modules表示打开 CSS Modules 功能。
全局作用域
CSS Modules 允许使用:global(.className)的语法声明一个全局规则。凡是这样声明的class都不会被编译成哈希字符串。
使用 css modules 的方式引入的 less 文件如果需要复写 antd 组件样式需要加上全局标识
:global {.ant-upload-select {margin-left: -12px;}.ant-upload-list {position: absolute;width: 80%;left: 24px;top: 0px}
}
