How to extend(inherit) a global CSS class from within a styled-components

Question

Is it possible to inject a global CSS class into a styled-component?

Similar to extending in LESS using &:extend or @extend in SASS.

This code doesnt apply the globalCSS styles:

const extendedComponent = styled.div`
  &:extend(.globalClass) // I want this component to inherit all styles of .globalaCSS
  .otherStyles {
    ...
  }
`

The globalClass does exits and even applies styles when used inline:

extendedComponent(className="globalCSS)

Answer 1

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