样式不能通过样式化组件起作用答案

【问题标题】：Styles are not working in through styled components样式不能通过样式化组件起作用
【发布时间】：2019-04-21 14:06:09
【问题描述】：

我正在尝试通过样式化组件添加背景颜色。

如果通过 style={} 属性添加样式，它会按预期工作，但如果我在我的样式组件文件中添加相同的样式，它就不会工作。

//this is working   
<MyStyle style={{backgroundColor: '#fff' }}>
     //some component here
</MyStyle>


//This is not working.
export const MyStyle = styled.div`
 background-color: ‘#fff’;    
`;

有人能指出我在这里缺少什么吗？

【问题讨论】：

标签： reactjs styled-components

【解决方案1】：

第一个示例只是使用内置的 react 样式，您不需要样式组件来执行此操作。

第二个例子中的代码，需要去掉颜色两边的引号，像这样：

//This is not working.
export const MyStyle = styled.div`
 background-color: #fff;    
`;

样式化组件采用 css 语法，与 json 语法不同，选项名称、颜色名称等周围没有引号。

【讨论】：

谢谢。删除了颜色名称周围的单引号。还是不行。
你有 babel 插件吗？（编辑，没关系，这不应该破坏它）

【解决方案2】：

您不必在 #fff 周围加上单引号

export const MyStyle = styled.div`
   background-color: #fff;    
`;

已编辑：

如果有覆盖的 CSS 样式使您的 div 的背景还不是白色，而您找不到它们，只需将 !important 添加到此样式中

export const MyStyle = styled.div`
   background-color: #fff !important;    
`;

关于查找可能覆盖您首选样式的现有 CSS 样式的问题，请查看以下内容：https://www.styled-components.com/docs/advanced#existing-css

【讨论】：

谢谢。删除了颜色名称周围的单引号。还是不行。
如果它仍然不起作用，您可能在某处有覆盖此样式的 CSS 样式。如果你熟悉 CSS 中的“点系统”，你应该知道这个问题。