css - 如何从样式组件中扩展(继承)全局 CSS 类

Question

是否可以将全局 CSS 类注入(inject)到 styled-component 中？ ？

类似于在 LESS 中使用 &:extend 或在 SASS 中使用 @extend 进行扩展。

此代码不应用 globalCSS 样式:

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

globalClass 确实退出，甚至在内联使用时应用样式:

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/basics#extending-styles