Как расширить (унаследовать) глобальный класс CSS из Styled-компонентов

Question

Возможно ли внедрить глобальный класс CSS в styled-component?

Аналогично расширению в LESS с использованием &:extend или @extend в SASS.

Этот код не применяется к стилям globalCSS:

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

globalClass действительно завершает работу и даже применяет стили при использовании inline:

extendedComponent(className="globalCSS)

Answer 1

Вы можете просто добавить «имя класса» к своему элементу, но если вы действительно хотите наследовать или расширять.

Используйте их пример как ссылку:

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;
`;

ссылка на документацию:https://www.styled -components.com / Docs / Основы # простирающиеся-стили