(ANTD) Customizing Style

Mirrer·2022년 8월 31일

antd

Library

목록 보기

6/17

Style Override

Ant-Design의 커스터마이징 방법

Ant-Design은 아래와 같은 기본 테마를 사용한다.

이번 포스팅에서는 Ant-Design을 자신만의 테마로 사용자 정의하는 방법에 대해서 설명해보겠다.

사용 방법

1. Plugin Install

아래 npm명령어를 통해 관련 Plugin을 설치한다.

npm install next-plugin-antd-less
npm install -D babel-plugin-import

2. WepPack Setting

프로젝트 루트 디렉토리에 next.config.js 파일을 생성한 뒤 다음 구성을 추가한다.

// next.config.js

/** @type {import('next').NextConfig} */
// eslint-disable-next-line @typescript-eslint/no-var-requires
const withAntdLess = require("next-plugin-antd-less");

const nextConfig = {
  // 추가 Next 설정
};

module.exports = withAntdLess({
  // antd less 변수를 직접 수정
  modifyVars: { '@primary-color': '#52c41a' },
  // 파일의 경로를 지정
  lessVarsFilePath: "./styles/variables.less",
  ...nextConfig,
  
  webpack(config) {
    return config;
  },
  
  // Next.js 10버전을 사용하는 경우에만 적용
  future: {
    webpack5: true,
  },
});

3. Babel Setting

WepPack Setting과 마찬가지로 .babelrc 파일을 생성한 뒤 다음 구성을 추가한다.

// .babelrc
{
  "presets": [
    "next/babel"
  ],
  "plugins": [
    [
      "import",
      {
        "libraryName": "antd",
        "style": true
      }
    ]
  ]
}

4. Overwrite Antd Less Variable

Antd less 변수를 직접 수정하는 것이 아닌 파일의 경로를 지정했다면 variables.less 파일을 생성하여 Antd 기본 디자인 스타일을 재정의한다.

// styles/variables.less
@import '~antd/lib/style/themes/default.less';
@import '~antd/dist/antd.less'; // 기존 Ant Design style 불러오기

@primary-color: #52c41a; // 스타일 재정의

추가적인 기본 변수는 해당 GitHub 페이지에서 확인할 수 있다.

5. Import Less File

_app.js 파일에 variables.less 파일을 추가하여 모든 페이지 컴포넌트에 공통으로 속성을 적용한다.

// pages/_app.js
import '../styles/variables.less';

const App = ({ Component, pageProps }) => {
  return (
    <>           
      <Component {...pageProps} />               
    </>
  );
};

export default App;