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

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 。 这是github上讨论的链接 。

Answer 2

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

例如：

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

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

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