Question

我对styled-components库有疑问。我知道这可能不是惯用的方法，但是我很好奇是否有一种可以返回CSS类名称的样式化组件方法。然后，我将能够将该类名称传递到我渲染的组件中。这样，我可以重用一些CSS。再说一次，也许这违背了将孤立的样式范围限定到单个组件的目的。

例如，是否有类似generateCss的功能？

const Button = styled.div`
  background-color: blue;
`

const myCssClassName = styled.generateCss`
    background-color: blue;
`
...
<Button className={myCssClassName} />

Answer 1

否，这是不可能的。 styled-components的整个想法是返回新组件。如果要创建类，则应查看glamor或aphrodite。这是a link上关于github的讨论。

Answer 2

如果要自定义现有样式的组件，则可以使用.extend() API。

例如：

const Button = styled.div`
  background-color: red;
`;

const BlueButton = Button.extend`
  background-color: blue;
`;

export default () => (
  <BlueButton />
);

样式化组件生成自定义CSS类

2 个答案: