반응에서 antd 기본 스타일을 수정하는 방법: 먼저 테이블에 div 상위 요소를 추가하고 className을 설정한 다음 이 스타일 내에서 테이블 헤더 스타일을 설정합니다.
이 튜토리얼의 운영 환경: windows7 시스템, React17 버전 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.
반응에서 antd의 기본 스타일을 수정하는 방법:
현재 반응+antd 프로젝트를 진행 중입니다. 필연적으로 우리는 antd의 기본 스타일을 수정하는 문제에 직면했습니다.
예를 들어 테이블 컴포넌트의 헤더 배경색을 설정하기 위해 요소 스타일을 직접 사용하면 전체 프로젝트의 테이블이 수정됩니다. 여기서 사용하는 방법은 테이블에 div 상위 요소를 추가하고 이에 대한 className을 설정한 다음 이 스타일 내에서 테이블 헤더 스타일을 설정하는 것입니다.
저는.less사전 컴파일을 사용합니다..less预编译。
.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); }
javascript(동영상)그런데 (&:extend (상속된 클래스 이름))을 통한
관련 무료 학습 권장 사항:.less의 스타일 상속은 다음과 같습니다.rrreee
위 내용은 반응의 antd 기본 스타일을 수정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
