반응의 antd 기본 스타일을 수정하는 방법

반응에서 antd 기본 스타일을 수정하는 방법: 먼저 테이블에 div 상위 요소를 추가하고 className을 설정한 다음 이 스타일 내에서 테이블 헤더 스타일을 설정합니다.

이 튜토리얼의 운영 환경: windows7 시스템, React17 버전 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

반응에서 antd의 기본 스타일을 수정하는 방법:

현재 반응+antd 프로젝트를 진행 중입니다. 필연적으로 우리는 antd의 기본 스타일을 수정하는 문제에 직면했습니다.

예를 들어 테이블 컴포넌트의 헤더 배경색을 설정하기 위해 요소 스타일을 직접 사용하면 전체 프로젝트의 테이블이 수정됩니다. 여기서 사용하는 방법은 테이블에 div 상위 요소를 추가하고 이에 대한 className을 설정한 다음 이 스타일 내에서 테이블 헤더 스타일을 설정하는 것입니다.

저는 .less 사전 컴파일을 사용합니다. .less预编译。

              <div className={styles.boxW} >
                    <Table 
                      columns={colType}
                      rowKey=&#39;fxwd&#39;
                      pagination={false}
                      bordered
                      dataSource={dataType}
                    />
              </div>

.boxW,.normalB {
    :global {
        .ant-table-thead > tr > th, .ant-table-tbody > tr > td {
            padding: 8px 8px !important;
        }
        .ant-table-thead > tr > th {
            background-color: rgb(192, 244, 248);
        }
        .ant-table-thead > tr > th:hover {
            background-color: rgb(192, 244, 248);
        }
        .ant-table-thead > tr > th.ant-table-column-has-actions.ant-table-column-has-sorters:hover {
            background: rgb(192, 244, 248);
        }
    }
}

这样就可以只修改到当前文件里table的样式了。

这里顺便记录一下.less

.boxW {
    min-width: 1150px;
}
.normalB {
    &:extend(.boxW);
    &:extend(.boxBorder);
}

rrreee이 방법을 사용하면 현재 파일의 표 스타일만 수정할 수 있습니다.

그런데 (&:extend (상속된 클래스 이름))을 통한 .less의 스타일 상속은 다음과 같습니다. rrreee

관련 무료 학습 권장 사항:

javascript🎜(동영상)🎜🎜

위 내용은 반응의 antd 기본 스타일을 수정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!