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]'
})

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

3 个答案: