styled-components로 컴포넌트 스타일 확장하기

styled-components에서 스타일 확장하기는 기존 컴포넌트를 기반으로 새로운 스타일을 추가하거나 덮어쓰는 기능이다. 이를 통해 중복 코드를 줄이고 컴포넌트의 재사용성을 높일 수 있다.

---

1. 기본 스타일 확장

styled-components의 styled 함수로 기존 스타일을 확장할 수 있다.

기존 컴포넌트를 재사용하면서 추가 스타일을 적용하거나, 기존 스타일을 덮어쓸 수 있다.

 

예제: 기본 확장

import styled from 'styled-components';

// 기본 버튼 컴포넌트
const Button = styled.button`
  padding: 10px 20px;
  background-color: gray;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
`;

// 확장된 버튼 컴포넌트
const PrimaryButton = styled(Button)`
  background-color: blue;
  font-weight: bold;
`;

function App() {
  return (
    <>
      <Button>Default Button</Button>
      <PrimaryButton>Primary Button</PrimaryButton>
    </>
  );
}

export default App;

 

styled(Button) : Button이라는 기존 스타일드 컴포넌트를 확장해서 새로운 컴포넌트를 생성한다.

---

2. 스타일 덮어쓰기

확장된 컴포넌트에서 기존 스타일을 덮어쓸 수 있다. 기존 스타일이 유지되면서 필요한 부분만 변경된다.

const LargeButton = styled(Button)`
  padding: 20px 40px; /* 기존 padding 덮어쓰기 */
  font-size: 1.5rem;
`;

function App() {
  return <LargeButton>Large Button</LargeButton>;
}

 

---

3. 동적인 확장(props 활용)

기존 컴포넌트의 props를 활용하여 확장된 컴포넌트에 동적인 스타일을 추가할 수 있다.

const DangerButton = styled(Button)`
  background-color: ${(props) => (props.disabled ? 'lightgray' : 'red')};
  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
`;

function App() {
  return (
    <>
      <DangerButton>Danger Button</DangerButton>
      <DangerButton disabled>Disabled Button</DangerButton>
    </>
  );
}

---

4. HTML 태그 변경

styled-components 확장을 통해 HTML태그를 변경할 수도 있다.

이때, 스타일은 유지되며 태그만 변경된다.

const LinkButton = styled(Button).attrs({ as: 'a' })`
  text-decoration: none;
  color: white;
`;

function App() {
  return <LinkButton href="#">Link Button</LinkButton>;
}

 

LinkButton은 Button 스타일을 유지하면서 <a>태그로 렌더링된다.

attrs메서드는 해당 컴포넌트의 속성을 지정할 때 사용

---

5. 컴포넌트 확장 + 다른 스타일 병합

다른 컴포넌트와 css를 병합해 확장할 수도 있다.

const Card = styled.div`
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 10px;
`;

const HighlightedCard = styled(Card)`
  border-color: blue;
  box-shadow: 0 4px 8px rgba(0, 0, 255, 0.2);
`;

function App() {
  return (
    <>
      <Card>Regular Card</Card>
      <HighlightedCard>Highlighted Card</HighlightedCard>
    </>
  );
}

---

6. 스타일 믹스인 활용

스타일 믹스인을 사용해 반복되는 스타일을 효율적으로 적용할 수 있다.

import { css } from 'styled-components';

const buttonStyles = css`
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 1rem;
`;

const Button = styled.button`
  ${buttonStyles}
  background-color: gray;
  color: white;
`;

const PrimaryButton = styled(Button)`
  background-color: blue;
`;

function App() {
  return (
    <>
      <Button>Default Button</Button>
      <PrimaryButton>Primary Button</PrimaryButton>
    </>
  );
}

 

buttonStyles를 css 코드로 분리하여 여러 컴포넌트에서 재사용한다.