styled-component 生成自定义 css 类答案

【问题标题】：styled-component generate custom css classstyled-component 生成自定义 css 类
【发布时间】：2018-06-26 23:07:35
【问题描述】：

我对@987654321@ 库有疑问。我知道这可能不是一种惯用的做事方式，但我很好奇是否有可以返回 CSS 类名的 styled-component 方法。然后我就可以将该类名传递给我渲染的组件。这样，我可以重用一些 CSS。再说一次，这可能违背了将隔离样式范围限定为单个组件的目的。

比如有generateCss这样的函数吗？

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

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

【问题讨论】：

标签： reactjs styled-components

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

例如：

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

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

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

【讨论】：