[ React / antd ] react ant-design theme 변경 ( custom theme )

React에서 antd를 사용중에, custom theme를 사용하는 방법에 대해 알아보았다.

antd의 공식 페이지(https://ant.design/docs/react/customize-theme)에서 customize에 대해 친절하게 설명을 써 주었지만, 난 왜이렇게 읽기가 어려운건지..ㅠㅠㅠㅠ...

 

 

 

 

* LinkedIn 글을 참고하여 작성.

 

 

 

---

 

 

 

1.  Create React App 을 통해 리액트 프로젝트 생성.

npx create-react-app <App Name>

 

 

 

 

 

2. antd 패키지 설치

// 1) npm install antd 명령어를 사용하여 전체 패키지 설치
npm install antd

// 2) npm install less -g 명령을 사용하여 less 전역 설치.
npm install -g less

 

 

 

 

 

3. antd/dist 폴더로 이동.

cd ./node_module/antd/dist

 

 

 

 

 

4. antd/dist 폴더 안에 새로운 less 파일 생성.

// 원하는 파일명으로 less 파일 생성.
touch my-theme.less

 

 

 

 

 

5. 생성한 less 파일 열기.

⭐️ antd deault 속성 값 확인 ⭐️

// my-theme.less
@import "./antd.less";

// custom 하고싶은 기본 변수에 원하는 값을 입력. 
@primary-color: #ff4acd;
@link-color: #ff4acd;

 

 

 

 

6. lessc --js my-theme.less custom-antd.css 실행

실행하면 custom-antd.css 파일이 생성된다. 

// ./node_module/antd/dist 루트에서 아래 명령어 실행.

lessc --js my-theme.less custom-antd.css

 

 

 

 

 

7. ./node_module/antd/dist 폴더 안에 생성된 custom-antd.css 파일 적용.

생성된 custom-antd.css 파일을 복사하여 src/ 루트 안에다 붙여넣고, (ex: src/루트 바로 안에 넣거나, src/assests/style 등과 같이 css 파일들이 들어있는 폴더가 따로 있다면 본인의 프로젝트 구조에 맞춰서 알아서 넣어주고 import 해주면 됨. )

app의 최상위 파일, antd.css가 있던 곳에 antd.css를 지우고 custom-antd.css파일을  import 시킨다. 

// index.js or app.js 파일의 antd.css 파일을
// 새로 생성한 custom-antd.css 로 변경.

//import "antd/dist/antd.css"
import "antd/dist/custom-antd.css"

 

 

 

 

 

 

하고 앱을 종료하고 재시작 하니 커스텀 테마가 잘 적용된다!!!!! 👍