[react] styled components에서 style확장(재사용)하기

styled-components

---

style 재사용

styled-components로 생성한 컴포넌트는 일반 React 컴포넌트처럼 상속이 가능합니다.

중복된 스타일을 가지거나 특정 스타일을 확장하고 싶을 때 컴포넌트를 확장하여 사용할 수 있습니다.

 

Button을 만들고 GreenButton과 BlueButton에서 Button을 확장하여 각각 스타일을 적용해 보겠습니다.

import React from "react";
import styled from "styled-components";

const App = () => (
  <Container>
    <Button>버튼</Button>
    <GreenButton>초록버튼</GreenButton>
    <BlueButton>파란버튼</BlueButton>
  </Container>
);

const Container = styled.div`
  display: flex;
`;

const Button = styled.button`
  outline: none;
  border: none;
  border-radius: 50%;
`;

const GreenButton = styled(Button)`
  background-color: green;
`;

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

export default App;