antd v5 테마적용

GlobalStyles.jsx에 폰트를 적용하려했는데 antd에서는 안먹었다.
알고보니 antd는 라이브러리라서 구조상 GlobalStyles위에 붙여줘야했다.

구글링을 해보고 작업을 해보니 자꾸 ~antd.dist뭐 그게 없다고 나왔다.
알아보니 v4버전에서는 알아본대로 babelrc, next.config뭐 이런걸 건드려주고 app에다 .less로만든 파일을 import를 했는데 v5에서는 그렇게 안한다고 한다.
뻘짓 1시간하다가 그냥 공식문서를 보자 하고 봤는데 역시 공식문서가짱이다.

암튼 v5에서 새로 바뀐버전으로 적용해보았다.

1. styles > antdTheme.js를 만든다.

export const antdTheme = {
  token: {
    // 원하는값
  },
};

원하는값은 antd공식문서 에서 찾아보면된다.

나는 이런식으로 작성했다.

export const antdTheme = {
  token: {
    colorPrimary: '#ffc8c8',
    fontFamily: 'ACCchildrenheartOTF-Regular',
  },
};

2. GlobalStyles에 font-face적용

font-face를 안써도되는 사람이면 2번은스킵.

font를 바꾸려면 font-face를 적용해야하는데 이건 자바스크립트 파일이라 GlobalStyles.jsx에 붙여줬다.
GlobalStyles.jsx

import { createGlobalStyle } from 'styled-components';
import { normalize } from 'styled-normalize';

export const GlobalStyles = createGlobalStyle`
    ${normalize}
    
    @font-face {
        font-family: 'ACCchildrenheartOTF-Regular';
        src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2112-2@1.0/ACCchildrenheartOTF-Regular.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }

    html,
    body {
        /* font-family: 'Noto Sans KR', sans-serif; */
        font-family: 'ACCchildrenheartOTF-Regular';
    }
`;

3. _app.js에 적용

원래 사용하던 코드에 antd에서 적용할수있는 ConfigProvider를 사용하여 아까만든 antdTheme를 붙여주면된다.

import { GlobalStyles } from '@styles/GlobalStyles';
import theme from '@styles/theme';
import { QueryClient, QueryClientProvider } from 'react-query';
import { ThemeProvider } from 'styled-components';
import { antdTheme } from '@styles/antdTheme'; // 이부분적용
import { ConfigProvider } from 'antd'; // 이부분적용
import axios from 'axios';
axios.defaults.withCredentials = true;

function MyApp({ Component, pageProps }) {
  const queryClient = new QueryClient();

  return (
    <QueryClientProvider client={queryClient}>
      <ConfigProvider theme={antdTheme}>// 이부분적용
        <ThemeProvider theme={theme}>
          <GlobalStyles />
          <Component {...pageProps} />
        </ThemeProvider>
      </ConfigProvider>// 이부분적용
    </QueryClientProvider>
  );
}

export default MyApp;

provider를 ThemeProvider(styled-components거)도 감싸주고 ConfigProvider(antd거) 도 감싸줘야하는데 순서는 상관없는거같다. 원하는대로쓰면될듯.
근데 provider를 여러번감싸도 괜찮은지 궁금하다. 아시는분 공유좀 부탁드려요~~