参考文档:
前置条件:React 脚手架搭建项目,使用 Antd UI 组件库
webpack 配置:
// webpack.config.js module.exports = { rules: [{ test: /\.less$/, use: [{ loader: 'style-loader', }, { loader: 'css-loader', // translates CSS into CommonJS options: { modules: true // 开启 CSS Modules } }, { loader: 'less-loader', // compiles Less to CSS options: { lessOptions: { // 如果使用less-loader@5,请移除 lessOptions 这一级直接配置选项。 modifyVars: { 'primary-color': '#1DA57A', 'link-color': '#1DA57A', 'border-radius-base': '2px', }, javascriptEnabled: true, }, }, }], // ...other rules }], // ...other config }
重写 Antd 组件样式:
```javascript // TestPage.ts import { Select } from 'antd'; import styles from './TestPage.less'; const Option = Select.Option; const children = []; for (let i = 10; i < 36; i++) { children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>); } ReactDOM.render( <Select mode='multiple' style={{ width: 300 }} placeholder='Please select' className={styles.customSelect}> {children} </Select>, mountNode ); ``` ```less // TestPage.less .customSelect { :global { .ant-select-selection { max-height: 51px; overflow: auto; } } } ```
开启 CSS Modules 后,以 import styles from '**/*.less' 方式引入,以 className={styles.className} 或 className={styles[className]} 的形式设置类名的,类名都会生成 Hash 字符串 的形式出现在 dom 的 class 里。
而使用 :global(.className) { // Your CSS Code... } 或 :global { .className { // Your CSS Code... } } 的语法,声明一个全局规则,该 className 不会被编译成哈希字符串。利用该语法实现 Antd 组件样式重写。
注意:上面例子 :global 声明的全局规则 是限定在 customSelect 类下的,这样只在 customSelect 下起作用,不会污染全局。