Question

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

如果通过style = {}属性添加样式，则可以正常工作，但是如果在样式化的组件文件中添加相同的样式，则无法正常工作。

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


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

有人可以在这里指出我在这里想念的东西吗？

Answer 1

您不必在#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

Answer 2

第一个示例只是使用内置的react样式，您不需要样式化的组件即可完成

。

第二个示例中的代码，您需要删除颜色周围的引号，如下所示：

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

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

样式无法通过样式化组件工作

2 个答案: