시작하기 전에 앱(create-react-app)에 antd을 설치하고 layout , components을 추가하고 스위치를 토글합니다. 구성 요소의 기본 스타일에도 antd.css를 사용하지만 나중에 제거하고 대신 less를 사용합니다.

1단계 - 필요한 패키지 설치

react-app-rewired

커스터마이즈크라

바벨 플러그인 가져오기

덜

덜 로더

antd-theme-webpack-plugin

npm install react-app-rewired customize-cra babel-plugin-import less less-loader antd-theme-webpack-plugin  --save-dev

설명:

react-app-rewired: 'eject'를 사용하지 않고 react-scripts 포크를 생성하지 않고 create-react-app 웹팩 구성을 조정합니다.

customize-cra: 새 문제[email protected]로 인해 react-app-rewired와 함께 customize-cra가 필요합니다.

babel-plugin-import: 필요에 따라 구성 요소를 가져옵니다.

less: antd에서 스타일링을 위한 기본 개발 언어입니다.

less-loader: less를 css로 변환하기 위한 컴파일러.

antd-theme-webpack-plugin: 특정 색상 less/css를 생성하고 브라우저에서 Ant Design 특정 색상 테마를 변경할 수 있도록 index.html 파일에 삽입하는 웹팩 플러그인입니다.

2단계 - vars.less 파일 생성

src 폴더와 파일 내부 어딘가에 vars.less 파일을 만들고 antd에서 사용하는 기본 less를 가져옵니다.

3단계 - config-overrides.js 파일 만들기

앱의 루트 디렉터리(package.json이 있는 위치)에서 config-overrides.js 파일을 만들고 다음 코드를 추가합니다.

일부 옵션 설명:

stylesDir: 2단계에서 생성한 vars.less 파일의 상위 디렉터리 경로
varFile: 2단계에서 생성한 vars.less 파일의 경로
themeVariables: 여기에 나열된 값은 5단계에서 수정할 수 있는 유일한 적은 변수입니다. Here(기본적으로 antd에서 적게 사용됨)는 추가할 수 있는 변수 목록입니다.

참고: less-loader@5를 사용하는 경우 확인하십시오this

4단계 - package.json 수정

package.json의 script 부분에서 react-app-rewired 대신 react-scripts를 사용합니다.

참고: 꺼내기 스크립트 호출을 뒤집지 마십시오.

이제 앱을 시작할 수 있습니다.

npm start

5단계 - 자바스크립트에서 더 적은 변수 수정

앱이 오류 없이 시작되었으면 마지막 단계로 이동해도 됩니다.

적은 변수를 수정하는 방법에 대한 샘플 코드는 다음과 같습니다.

//less variables that will be used here must be declared in themeVariables on config-overrides.js
window.less
    .modifyVars({
        "@primary-color": "#52c41a"
     })
    .then(() => {
        //do other stuff here
     })
     .catch(error => {
         console.error(error);
     });

이제 가져오기를 제거할 수 있습니다antd.css

실시간 미리보기: https://antd-change-theme-color.netlify.app/

코드: https://github.com/christianandrei/antd-change-theme-color

즐거운 코딩하세요!

곧: Antd Darkmode 튜토리얼!

계속 지켜봐 주세요!

Reference

이 문제에 관하여(create-react-app을 사용하여 런타임에 antd 테마를 변경하는 5단계), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/christianandrei/5-steps-to-change-antd-theme-on-runtime-using-create-react-app-p2k

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

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

create-react-app을 사용하여 런타임에 antd 테마를 변경하는 5단계