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

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

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Thymeleaf 의 일반 양식 제출 과 AJAX 제출

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다