Styled Components 스타일 상속하기

: 기존에 정의된 컴포넌트의 스타일을 기반으로 새로운 스타일을 추가하거나 수정할 수 있는 기능이다. 

예제)

이미 정의된 StyledButton이라는 버튼 컴포넌트의 기본 스타일을 상속받아 좀 더 화려한 버튼인 FancyButton을 만들기

1. StyledButton 예시

import styled from 'styled-components';

export const StyledButton = styled.button`
  padding: 10px 20px;
  background-color: #4caf50;
  color: white;
  border-radius: 5px;
  border: 1px solid darkgreen;
  cursor: pointer;
  transition: background-color 0.3s;
  
  &:hover {
    background-color: #45a049;
  }
`;

2. FancyButton으로 상속받고, 몇 가지 스타일 추가&변경하기

export const FancyButton = styled(StyledButton)`
  background-image: linear-gradient(to right, #ff7e67, #ffbd67);
  border: none;
`;

• 상속받은 스타일

       StyledButton의 모든 스타일'  (패딩, 초기 배경색, 글자색, 테두리 둥근 정도, 커서 스타일, 호버 시의 배경색 변경 등)

• 변경된 스타일

       배경 이미지: 기본 배경색 대신 linear-gradient를 사용하여 배경에 그라디언트 효과를 주었다.
       테두리 제거: border 스타일을 none으로 설정하여 기존의 테두리를 제거한다.

새롭게 만든 FancyButton 컴포넌트 사용법

import React from 'react';
import { FancyButton } from './ButtonStyles'; 

function App() {
  return (
    <div>
      <FancyButton>Click Me!</FancyButton>
    </div>
  );
}

export default App;

이처럼 Styled Components를 활용하여 스타일을 상속받는 방식은 기존 코드의 재사용성을 높이고, 스타일 관리의 복잡성을 줄이는 데 큰 도움이 된다.

기존 컴포넌트를 바탕으로 새로운 변형을 쉽게 추가할 수 있기 때문에 대규모 프로젝트의 유지 관리에 특히 유리하다.