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 组件样式：

// 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
);

// 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 下起作用，不会污染全局。