score:1

Use attrs: https://styled-components.com/docs/api#attrs

const extendedComponent = styled.div.attrs({
    className: 'globalCssClassThatIWantToExtend'
})`
    .otherStyles {
        /*...*/
    }
`;

The attrs function can also accept a props function:

.attrs(props => ({
    /*...*/
}))

score:2

you can just add the "class name" to your element, but if you really want to inherit or extend.

Use their example as reference:

const Button = styled.button`
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

// We're extending Button with some extra styles
const TomatoButton = Button.extend`
  color: tomato;
  border-color: tomato;
`;

docs link: https://www.styled-components.com/docs/basics#extending-styles


Related Query

More Query from same tag