Ant Design CSS 스타일 오버라이드 가이드

이 페이지는 컴포넌트 스타일 커스터마이징, 테마 설정, CSS 우선순위 처리 방법 등을 포함한 Ant Design 스타일 오버라이드에 대한 상세 가이드를 제공합니다.

테마 커스터마이징 (Theme Customization)

Ant Design은 테마 설정을 통해 전체적인 스타일을 커스터마이징할 수 있도록 지원합니다. 테마 설정은 주로 Less 변수를 통해 이루어집니다.

설정 방법

프로젝트에 less와 less-loader를 설치합니다:
```
npm install less less-loader --save-dev
```

프로젝트 루트 디렉토리에 vue.config.js(Vue CLI 프로젝트의 경우)를 생성하거나 config-overrides.js(CRA 프로젝트의 경우)를 수정하여 다음 코드를 추가합니다:

const { defineConfig } = require('vue-cli-plugin-antd-config');
module.exports = defineConfig({
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars: {
            'primary-color': '#1DA57A',
            'link-color': '#1DA57A',
            'border-radius-base': '2px',
          },
          javascriptEnabled: true,
        },
      },
    },
  },
});

Less 변수

Ant Design은 테마 커스터마이징을 위한 일련의 Less 변수를 제공합니다. 자주 사용되는 변수는 다음과 같습니다:

변수	설명	기본값
`@primary-color`	브랜드 색상	`#1890ff`
`@link-color`	링크 색상	`@primary-color`
`@success-color`	성공 색상	`#52c41a`
`@warning-color`	경고 색상	`#faad14`
`@error-color`	오류 색상	`#f5222d`
`@font-size-base`	기본 폰트 크기	`14px`
`@heading-color`	제목 색상	`rgba(0, 0, 0, 0.85)`
`@text-color`	기본 텍스트 색상	`rgba(0, 0, 0, 0.65)`
`@text-color-secondary`	보조 텍스트 색상	`rgba(0, 0, 0, 0.45)`
`@disabled-color`	비활성화 색상	`rgba(0, 0, 0, 0.25)`
`@border-radius-base`	컴포넌트/팝오버 둥글기	`4px`
`@border-color-base`	테두리 색상	`#d9d9d9`
`@box-shadow-base`	컴포넌트 그림자	`0 2px 8px rgba(0, 0, 0, 0.1)`

스타일 오버라이드 (Style Overriding)

경우에 따라 Ant Design 스타일을 더 세밀하게 오버라이드해야 할 수도 있습니다. 이때는 CSS 선택자의 구체성(Specificity)을 높이거나 !important를 사용하여 구현할 수 있습니다.

CSS 우선순위

CSS 우선순위 규칙은 동일한 요소에 여러 스타일 규칙이 적용될 때 어떤 규칙이 적용될지 결정합니다. 우선순위는 높은 순서대로 다음과 같습니다:

인라인 스타일 (Inline styles)
ID 선택자 (#id)
클래스 선택자 (.class), 가상 클래스 (:hover), 속성 선택자 ([type="text"])
요소 선택자 (div, h1 등) 및 가상 요소 (::before, ::after)
전체 선택자 (*) 및 결합자 (descendant, child, adjacent sibling, general sibling)

!important 사용

!important는 특정 스타일 규칙의 우선순위를 높여 강제로 적용하는 데 사용할 수 있습니다. 단, 남용은 권장되지 않으며 최후의 수단으로 사용해야 합니다.

.ant-btn {
  background-color: red !important;
}

결론

테마 커스터마이징과 스타일 오버라이드를 통해 개발자는 프로젝트 요구 사항에 따라 Ant Design 스타일을 유연하게 조정하고 독특한 애플리케이션 인터페이스를 구축할 수 있습니다. 더 자세한 정보는 Ant Design 공식 문서를 참조하세요.