[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?