antd에 styled-components 간단 적용

이슈

antd로 불러온 컴포넌트에 styled-components를 적용할 때, 이미 컴포넌트가 상단에 정의되어 있어서 동일한 변수명을 가진 styled-components를 만들 수 없어서 난감했습니다. 같은 이름을 쓰자니 상단에 있어서 중복되고, 다른 이름을 쓰자니 이미 정해져 있는 antd 컴포넌트명을 함부로 바꾸면 안 되는거 아닌가...? 라는 생각이 들었습니다.

해결 방법

해결 방법은 의외로 간단했는데, styled(컴포넌트) 처럼 사용해서 가져다써도 상관없었습니다! styled-component로 활용하는 방법으로는 1. 스타일링된 엘리먼트를 만들어서 가져다 쓰기 2. 이미 만들어진 컴포넌트를 스타일링해서 가져다 쓰기 로 나눠볼 수 있겠습니다. 1번 방법은 styled.태그명 처럼 작성하고, 2번 방법은 styled(컴포넌트명) 처럼 함수의 parameter로 컴포넌트를 전달하여 스타일링합니다.

 

그리고 antd를 적용할 때도 마찬가지로 2번 방법, 즉 이미 만들어진 컴포넌트를 스타일링한 새로운 컴포넌트명을 사용해도 무방하다는 것을 알았습니다. (무조건 antd에서 정한 컴포넌트명을 그대로 써야된다고 생각했는데, 그게 아니었습니다.)