[Ant Design] token을 이용하여 컴포넌트 padding을 변경하기

사이드 프로젝트에서 Ant design 컴포넌트를 활용하고 있는데, select의 padding을 반응형 대응되도록 변경하느라 조금 삽질을 했다.

결론부터 작성하자면

결론

Token을 이용하여 Antd compoent의 padding을 수정할 경우

• 기본 가로 패딩: paddingSM
• large 사이즈의 가로 패딩: ControlPaddingHorizontal

---

Ant Design 디자인 커스텀 방법

Ant design 컴포넌트의 css를 변경할 수 있는 방법으로는 크게 두가지가 있다.
1. css class 직접 수정하기
2. design token 이용하여 수정하기
나는 token을 이용하여 변경할 수 있는 부분은 가능한 token을 이용하고, 나머지 부분에 한해서만 css class를 수정하도록 개발하였다.
(참고로 useBreakPoint hook과 alias token의 screen property을 활용하여 컴포넌트가 768 미만 화면에서는 middle사이즈로, 768 이상 화면에서는 large사이즈로 렌더되도록 구현하였다.)

---

문제

Input 컴포넌트의 디자인을 변경하고 있었고, Ant design Input 문서의 Design Token 항목을 참고하여 작성했다.controlPaddingHorizontal과 controlPaddingHorizontalSM이 좌우 padding을 변경할 수 있다고 하여, 다음과 같이 작성하였다. (~SM은 small~medium 사이즈의 padding에 적용됨)

const inputToken = {
  // ...
  controlPaddingHorizontal: 24,
  controlPaddingHorizontalSM: 20,
  // ...
}

스토리북을 확인해보니 Large 크기에는 적용되었지만, middle 크기에는 적용되지 않았다.

---

해결

Ant design의 Input 컴포넌트에 Token 스타일을 적용하는 코드를 살펴보았다.

1. genBasicInputStyle 함수에서 token.paddingInline을 좌우 Padding으로 입력한다. (line.205)
2. paddingInline값은 initComponentToken 함수에서 계산된다. 관련된 수식은 아래와 같다. (line.1074)

   paddingInline: paddingSM - lineWidth,
   paddingInlineSM: controlPaddingHorizontalSM - lineWidth,
   paddingInlineLG: controlPaddingHorizontal - lineWidth,

3. 기본에는 paddingInline이, small 사이즈에는 paddingInlineSM이, large 사이즈에는 paddingInlineLG가 적용된다.

따라서 middle 사이즈의 컴포넌트의 좌우 padding을 변경하기 위해 paddingSM 값을 입력해주었다.

const inputToken = {
  // ...
  controlPaddingHorizontal: 24,
  paddingSM: 20,
  // ...
}

middle 사이즈에도 적절한 padding이 반영된 것을 확인할 수 있다.