스타일 확장

Styled Components의 스타일 확장은 styled()함수에 정의된 스타일 컴포넌트를 전달하여 컴포넌트 스타일을 확장(extends) 하는 것이다.

AppFillButton.js

import styled from 'styled-components'
import AppButton from './AppButton'

// AppButton 확장
export const AppFillButton = styled(AppButton)`
  border: 0;
  padding: 0.45em 0.95em 0.6em;
  background-color: ${ props => props.reject ? '#026' : '#06f' }
  color: ${ props => props.reject ? '#09f' : '#fff' }
  font-weight: 600
`

AppButton.js

import styled from 'styled-components'

const AppButton = styled.button`
  cursor: pointer;
  margin: 0 5px 0 0;
  border: 1px solid currentColor;
  border-radius: 4px;
  padding: 0.4em 0.76em 0.6em;
  fontSize: 0.9rem;
  color: ${ props => props.reject ? '#f60' : '#06f' };
`

export default AppButton

참고 Extending Styles(공식 문서)