如何将样式组件样式附加到组件className道具？

Question

嗨，大家好，我已经创建了一个React组件。 以反应方式，我可以通过className =“ some_style”轻松将CSS样式附加到我的组件上

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

说为

<Component className="styled_component" />

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

Answer 1

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

Answer 2

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

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

注意我如何使用样式。 div，因为它是我正在使用的div元素。 然后，要渲染此componenet，请执行与其他任何组件相同的操作。

return(
   <StyledDiv />
)

然后，div将使用您应用于它的css进行渲染，您无需与className进行交互。

Answer 3

这通常对我来说效果很好（即使我很滑稽地实际上发现了这个问题，原因是使用className在特定情况下遇到了麻烦）：

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