Styled Components and Inheritence

page.jsx

// GenericButton.styles.js
export const GenericButton = styled.button`
  width: 90%;
`

// SubmitButton.styles.js
import { GenericButton } from '../GenericButton.styles'

// This components inherits the styles of GenericButton
export const SubmitFormButton = styled(GenericButton)`
  background: red;
`

// SubmitButton.jsx
import { SubmitFormButton } from './SubmitButton.styles.js'

const SubmitButton = () => <SubmitFormButton active={active}>Click me</SubmitFormButton>