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