styled-components でスタイリングしたコンポーネントがあります

const StyledButton = styled.button`
  border-radius: 6px;
  padding: 16px;
  background-color: coral;
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
`

export default StyledButton

あらかわいい

このコンポーネントを styled の引数に入れることでスタイルの上書きができます

import StyledButton from './button'

const ArrangedButton = styled(StyledButton)`
  background-color: plum;
  border-radius: 0px;
`

しかしこのコンポーネントを Wrap する React コンポーネントを作成して、そのコンポーネントのスタイルを上書きしようとしてもうまくいきません

const StyledButton = styled.button`
  border-radius: 16px;
  padding: 16px;
  background-color: coral;
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
`

const Button: React.FC = ({ children }) => {
  // ...some functions
  return <StyledButton>{children}</StyledButton>
}

const ArrangedButton = styled(Button)`
  background-color: plum;
`

実はこのコンポーネントに上書きしたスタイルの class が適用されていません

styled-components では styled の適用の際に引数に className が渡っています

このため引数で受け取って下位のコンポーネントに割り当てる必要があります

TypeScript を使っていると className が未定義と怒られて面倒なので、スプレッド演算子を使って対応します

const Button: React.FC = ({ children, ...rest }) => {
  // ...some functions
  return <StyledButton {...rest}>{children}</StyledButton>
}

スタイルの上書きがうまくいきました

完