如何将 styled-component 样式附加到组件 className 道具？答案

【问题标题】：how to attach styled-component style to a component className props?如何将 styled-component 样式附加到组件 className 道具？
【发布时间】：2019-07-06 20:13:09
【问题描述】：

大家好，我已经创建了一个反应组件。以反应方式，我可以通过 className="some_style"

轻松地将 css 样式附加到我的组件

但是我如何将我的样式组件附加到这些 className 道具。

说成

<Component className="styled_component" />

我不知道我会使用哪种方法？谢谢

【问题讨论】：

'Styled Components' 字面意思是您正在创建一种新类型的样式化组件。使用样式化组件时，不需要基于类的样式，这就是重点。阅读样式化组件文档，这个问题意味着您不了解样式化组件是什么或如何使用它们。一旦您了解了一般主题，如果您仍有特定问题，请将其发布到堆栈上，我们可以提供帮助。
其实我明白 styled-component 的作用。我只需要这样做，因为某些库（反应堆助手）希望通过 className 道具提供样式。:)
您的问题不清楚，请改写问题以使其更清楚。您是否正在尝试将类添加到样式化组件？与其在每个回答中跟进真正的问题，不如解释问题中的实际问题。
如果您尝试使用类将样式化组件的样式属性附加到组件上，那么不要使用样式化组件，而是创建一个 CSS 类并使用它。

标签： css reactjs styled-components

【解决方案1】：

这通常对我很有效（即使我发现这个问题很有趣，因为我在使用 className 时遇到了特定情况）：

const Component = styled.div.attrs({
  className: '[add your classes here]'
})

【讨论】：

这应该是一条评论。

【解决方案2】：

使用样式组件时，您不必再在组件上使用 className 属性。假设您有一个要设置样式的 div。首先将 div 声明为 styled-component。

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

注意我是如何使用 styled 的。div 因为它是我正在使用的 div 元素。然后要渲染这个组件，您可以像处理任何其他组件一样执行相同的操作。

return(
   <StyledDiv />
)

然后，div 将使用您应用的 css 进行渲染，您不必与 className 交互。

【讨论】：

实际上是对一个名为 reactour 的库的强制要求。这是我需要将样式传递给它的 className 道具。但我更喜欢样式化组件的方式。有什么建议吗？ :)
那么看来您为您的 css 使用了错误的解决方案。也许您应该使用单独的 css 文件的传统方法，而不是声明样式组件，这样您就知道运行时的类名。

【解决方案3】：

你不能，因为你不知道你的 css-in-js 会被编译成哪个类名。样式化组件可帮助您在 JS 中编写特定组件的 CSS。您可以尝试在 Component.js 文件中编写 <Component /> 的 CSS。如果 CSS 类是可重用的，则创建一个通用 CSS 文件并将其包含在 index.js/App.js 中

【讨论】：

实际上是对一个名为 reactour 的库的强制要求。这是我需要将样式传递给它的 className 道具。但我更喜欢样式化组件的方式。有什么建议吗？ :)
样式化组件也有自己的方法，不建议您这样做。如果您遇到任何解决方案，那将是一个 hack。最好创建一个 style.css 文件，在其中声明静态类名。