Ant Design 에서 덮어 쓰기 구성 요소 스타일

비 즈 니스 필드:

          ，                  ，         。

antd Select       ，          ，             ，          

코드:

// TestPage.less
.customSelect {
  :global {
    .ant-select-selection {
      max-height: 51px;
      overflow: auto;
    }
  }
}

// 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({i.toString(36) + i});
}

ReactDOM.render(
  <Select
    mode="multiple"
    style={
     { width: 300 }}
    placeholder="Please select"
    className={styles.customSelect}
  >
    {children}
  
, mountNode);

주의해 야 할 두 가지 가 있다.

도 입 된 antd 구성 요소 클래스 는 CSS Modules 로 전환 되 지 않 았 기 때문에 덮어 쓴 클래스 .ant-select-selection 는 :global 에 넣 어야 합 니 다.

이전 관계 로 인해 커버 는 전체 적 인 것 이다.다른 Select 구성 요소 에 영향 을 미 치 는 것 을 방지 하기 위해 서 는 별도의 className 을 패키지 하여 스타일 의 적용 범 위 를 제한 해 야 합 니 다.

다음으로 전송:https://www.cnblogs.com/nhz-M/p/10624972.html