앤트 디자인(Ant Design) 사용하며 배운 점
Ant Design 커스터마이징이 왜 필요하지?
리액트를 위한 UI 라이브러리인 앤트 디자인에서,
이미 여러 디자인을 위한 컴포넌트 라이브러리를 제공하지만
원하는 요구 사항을 지원하지 않는 경우도 있다
예를 들면
Select 컴포넌트 경우 border-radius를 변경할 수 없다
테마를 커스터마이징도 있다고 공식 홈페이지에서 말하지만 복잡해 보인다
원하는 것은 그저 Select에 border-radius를 주고 싶을 뿐!
구원자 Styled Components
스타일드 컴포넌트(Styled Componets)와 함께라면 할 수 있다!
간단히 말해 컴포넌트를 CSS에 붙이는 것이고,
대표적으로 emotion 혹은 styled-component가 있다.
앤트 디자인의 Select에는
`ant-select-selector`라는 클래스가 있다. 이걸 이용하자!
아래 예시가 있고 emotion을 사용했다
앤트디자인 + Styled Component 예시
// StyledSelect.jsx
import styled from '@emotion/styled';
import { Select } from 'antd';
export default styled(Select)`
.ant-select-selector {
border-radius: 8px !important;
}
`;
Styled Component를 사용 안한다면
개념은 비슷하다
1. 우선 Select 컴포넌트에 클래스 이름을 주고,
2. 그 클래스를 CSS 파일에서 바꿔주면 된다.
마무리
!important가 썩 마음에 들지는 않지만,
저 StyledComponent를 사용할 때만 적용되는 거라고 예상되니 나두자
생각거리
이렇게 생성한 스타일된(Styled) Select 컴포넌트를
React Testing Library에서 사용하려면 어떻게 할까?
보통 Select를 불러올 때처럼 하면 될까?
비슷한 상황을 경험을 했고, 다른 포스트에 정리 해봐야겠다
