Ant Design Customize Theme

현재 제작하고 있는 git portfolio 페이지 제작 중 Ant Design으로 쓰면 좋을것 같은 부분이 있어 적용을 했다.

 

Ant.Design > Breadcrumb

그런데 기본으로 사용할 경우, 내가 만든 페이지 크기에 비해 비율이 작아 좀더 크게 보였으면 하는 바람이 있었다.

예전에 React로 챗봇을 만들 때 확인했던 방법인데, 정답은 Ant Design 공식 홈페이지 Development 메뉴에 있는 Cuttomize Theme 이다.

import { Button, ConfigProvider } from 'antd';
import React from 'react';

const App: React.FC = () => (
  <ConfigProvider
    theme={{
      token: {
        colorPrimary: '#00b96b',
      },
    }}
  >
    <Button />
  </ConfigProvider>
);

export default App;

즉, ConfigProvider를 import한 후, 내가 사용하려는 컴포넌트를 감싸준다. (ex. Button)

나의 경우 단순히 글자 크기를 키우고 싶었기 때문에 예제처럼 colorPrimary를 변경하진 않고 fontSize만 변경하였다.

 

Token Name역시 공식 홈페이지 가이드에 명시되어 있으니 참고!!