Use attrs:

const extendedComponent = styled.div.attrs({
    className: 'globalCssClassThatIWantToExtend'
    .otherStyles {

The attrs function can also accept a props function:

.attrs(props => ({


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:

Related Query

More Query from same tag