antd 覆蓋組件樣式

覆蓋組件樣式#

因爲業務的個性化需求，咱們常常會遇到須要覆蓋組件樣式的狀況，這裏舉個簡單的例子。

antd Select 在多選狀態下，默認會展現全部選中項，這裏咱們給它加一個限制高度，超過此高度就出滾動條。

// TestPage.js

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;
    }
  }
}

方法很簡單，有兩點須要注意：

引入的 antd 組件類名沒有被 CSS Modules 轉化，因此被覆蓋的類名 .ant-select-selection 必須放到 :global 中。

由於上一條的關係，覆蓋是全局性的。爲了防止對其餘 Select 組件形成影響，因此須要包裹額外的 className 限制樣式的生效範圍。

仔細看官方文檔仍是有必要的，一開始這個問題就困擾着我。