antd 스타일 변경

이번에 진행하는 프로젝트에서 Ant Design을 사용하게 되었다.

ant design 컴포넌트를 사용하다보면 필요한 형태로 커스텀해야 하는 경우가 다반사이다.

이 때, ant Design이 제공하는 Design Token을 이용하여 편리하게 스타일을 변경할 수 있다.

Design Token

Design Token에는 일관성을 위해 공통으로 적용하고 싶은 디자인 속성 Global Token과 유연성을 위해 개별 컴포넌트의 구체적인 디자인 요소를 정의하는 Component Token이 존재한다.

Dropdown Component를 이용한다고 했을 때,

    <Dropdown menu={menuProps}>
      <Button>
        <Space>
          Button
          <DownOutlined />
        </Space>
      </Button>
    </Dropdown>

Component Token

Component Token은 configProvider로 감싼 후, 스타일 적용할 컴포넌트 이름을 적고 아래의 Token name 중 적용하고 싶은 token을 적으면 된다.

예를 들면,

<ConfigProvider
            theme={{
                components: {
                 Dropdown: {
                   zIndexPopup: 100,
                    },
                },
            }}
        >
 </ConfigProvider>

여담으로..
위에 홈페이지 token name에는 paddingBlock이 있는데 이것저것 해보다paddingBlock을 사용해봤는데 해당 속성이 없다는 type error가 나서 타고타고 올라가다 보니 정말 없었다는 이야기..😯

Global Token

Global Token은 동일하게 configProvider로 감싼 후,theme 속성 명을 token으로 햐고 Token name 중 적용하고 싶은 token을 적으면 된다.

배경색, 폰트, boxshadow, padding, margin 등 다양한 스타일 속성들을 커스텀할 수 있다.

예를 들면,

        <ConfigProvider
            theme={{
                token: {
                  controlItemBgHover:'#ff0202'
                },
            }}
        >
            <Dropdown menu={{ items: menuItems }}>
                <Button>
                    <Space>
                        {children}
                        <DownOutlined />
                    </Space>
                </Button>
            </Dropdown>
        </ConfigProvider>

이를 적용해 보면 아래와 같이 hover했을 때의 배경색을 설정할 수 있다.

이외의 객체 내에서 직접적으로 지원되지 않는 속성들은 css로 직접 수정해야하겠지만 자주 사용할 법한 속성들을 편하게 적용가능하다는 점에서 Design Token을 알아두면 좋을 것 같다 🙂