javascript - 스타일링 된 컴포넌트/반응

확장하려는 간단한 버튼 예제를 작성 중입니다. 새 버튼을 추가하고 일부 상수도 포함했습니다. 여태까지는 그런대로 잘됐다. 버전 1, 버전 2, 같은 버튼의 버전 3과 같은 더 많은 버튼 버전을 사용하려는 경우 배경 색상과 같은 일부 스타일이 변경되었습니다. 어떻게해야합니까? 어떻게 내 보내야합니까?

const PrimaryButton = styled.button`
  font: inherit;
  padding: 0.5em 1em;
  border: 1px solid;
  background-color: ${buttonBackgroundColor};
  color: ${buttonColor};
  border-radius: 0.25em;
  border-color: ${colors.blueLight};
  margin-right: 0.5em;
  cursor: pointer;
  outline:none;
  :hover {
    background-color: ${colors.blueLight};
  }
`;

버튼을 확장 할 수 있습니까 (어떻게?) 또는 각 버튼마다 다른 구성 요소를 추가하는 것이 더 합리적입니까? 타이포그래피를 위해 "extend"를 사용했습니다. 작동합니다. 다른 버튼 버전에 대해서는 어떻습니까? 비슷한 방법이 있습니까?

export const H1 = styled.h1`
  font-size: 30px;
  color: red;
`
export const H2 = H1.withComponent('h2').extend`
  font-size: 24px;
`