[Styled-components] Semantic-ui-react의 스타일 커스터마이징하기

🤔 문제 상황

Semantic-ui-react를 사용해서 css 스타일링을 하는데 추가로 커스터마이징이 필요했다.
그래서 클래스명을 사용한 덮어쓰기도 해보고,
태그를 사용하여 추가해봤지만 무용지물이었다.
!important만이 방법인가... 하고 있던 중 좋은 글을 발견해서 실마리를 찾았다

참고: Customizing the Semantic UI React library with Styled Components

✅ 해결 방법

보통 css에서 !important를 사용되는 것은 지양된다.

모든 우선순위를 무시한 채 최상위에서 적용되기 때문에
어떤 부작용이 나타날지 모르기 때문이다.

하지만 styled-components를 사용하면 말이 달라진다.

styled-components는 자체 class명을 컴포넌트에 부여해서 스타일을 지정하기 때문에
!important를 사용해도 해당 컴포넌트에서만 영향을 미치게 된다.

다른 요소에는 적용되지 않는다는 말이다.

그래서 필자는 Semantic-ui-react를 사용할 때 커스터마이징을 필요하다면

styled-components를 사용할 것을 권하고 있다.

결론: styled-components를 사용한다면 !important를 사용해서 커스터마이징해라

예시

Semantic-ui-react에서 제공되는 Button을 커스터마이징하고 싶다면

const TistoryBtn = styled(Button)`
    background-color: red !important;
`;

이런 식으로 Button을 불러와서 추가할 스타일을 넣어준다.
그러면 공통 스타일에 해당 스타일이 덮어쓰기된다.