[Styled-Components] 외부 컴포넌트 라이브러리의 UI 컴포넌트 스타일을 직접 수정하는 방법

외부 컴포넌트 라이브러리의 UI 컴포넌트 스타일을 직접 수정하는 방법

들어가며

• @antd@ 등 외부 컴포넌트 라이브러리의 UI 컴포넌트를 Styled-Components를 이용하여 직접 수정하는 방법을 정리해본다.

 

방법

• 스타일 파일(@컴포넌트명.style.js@)이나 컴포넌트 파일(@컴포넌트명.js/jsx/tsx@)에서 다음과 같이 코드를 작성하고 변경/추가하고자 하는 스타일을 넣어주면 된다.

import styled from "styled-components";

import { 외부컴포넌트명 } from "외부_컴포넌트_라이브러리_패키지";

export const 커스텀외부컴포넌트명 = styled(외부컴포넌트명)`
  속성: 값;
`;

 

• 그리고 다른 일반적인 Styled-Components 요소처럼 사용하면 된다.

import * as S from './컴포넌트명.style.js';

const 컴포넌트명 = () => {
  return <S.커스텀외부컴포넌트명>{value}</S.커스텀외부컴포넌트명>
}

export default 컴포넌트명;

 

예제 코드

• 아래의 코드는 @antd@ 외부 컴포넌트 라이브러리의 @Button@ 컴포넌트에 스타일을 추가하는 예제 코드이다.

 

Header.style.js

import styled from "styled-components";

import { Button } from "antd";

// antd <Button> 컴포넌트 스타일 커스텀하기
export const CustomButton = styled(Button)`
  background: rgba(255, 255, 255, 1);
  color: rgb(80, 80, 80);
  border: 1px solid rgba(155, 155, 155, 0.8);
  font-weight: 600;
  font-size: 0.8rem;

  &:hover {
    background: transparent;
  }

  & a {
    color: red;
  }
`;

 

Header.jsx

• 사용할 때는 일반적인 Styled-Components 요소처럼 사용하면 된다.

import * as S from './Header.style.js';

const Header = () => {
  return (
     <>
       <S.CustomButton>Click</S.CustomButton>
     <>
 );
}

export default Header;

 

참고 사이트

Is there a way to modify styles to an external component library without specifying the default class names or using !important?