본문 바로가기

Front-end/ReactJS

[ReactJS] Ant Design Custom Theme 사용하기

개요


컴포넌트 단위의 디자인 Variables 확인

    ant-design-component 프로젝트를 실행하여 아래와 같은 화면을 확인할 수 있습니다.
    • (1): Component의 목록을 표시하는 메뉴입니다. 이 메뉴를 클릭하면 오른쪽의 상세 정보 화면이 변경됩니다.
    • (2): 선택한 Component가 화면에 표시되는 미리보기 화면입니다.
    • (3): 선택한 Component에서 사용되는 기준 값입니다. LESS 언어 기준으로 설정되어 있습니다.

컴포넌트 디자인 변경하기

  • 가칭 theme.less 파일에서 변경하고자 하는 Variable 을 설정합니다.
    • 예:
      • 위와 같이 변경할 경우 해당 값을 사용하는 모든 컴포넌트들의 디자인이 변경됩니다.
  • theme.less의 값을 설정 혹은 변경 후 서버를 다시 시작해야 적용됩니다.


요약

  1. ant-design-components 프로젝트를 실행
  2. 변경하고자 하는 컴포넌트를 메뉴에서 확인
  3. "사용 예" 화면에 표시되는 값을 확인
  4. theme.less 파일에서 변경
  5. 서버를 다시 시작하여 변경된 부분을 확인.