CSS Modules 配置，及 Antd 组件样式重写

参考文档：

CSS Modules 用法教程-阮一峰

 

前置条件：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 下起作用，不会污染全局。