Styled Components背景色样式不生效问题求助

你的问题出在AppStyles.js里的语法错误——你在styled-components的模板字符串里错误地写了className = ${(props)=>props.className}和id = ${(props)=>props.id}这两行，这会被当成无效的CSS规则，导致整个样式块解析出错，后面的background-color自然无法生效。

styled-components会自动把你传递给组件的id、className这类原生DOM props传递到底层的<div>元素上，完全不需要手动在样式模板里赋值。

修改后的代码 #

AppStyles.js #

import styled from 'styled-components'

const StyledContainer = styled.div`
    background-color: grey;
`
export {
    StyledContainer
}

额外说明 #

如果需要在styled组件里基于传入的样式扩展自定义规则，可以用${props => props.className}的方式，但要确保传入的是合法CSS代码片段，比如：

const StyledContainer = styled.div`
    background-color: grey;
    ${props => props.customStyles}
`

如果只是给DOM元素添加类名，直接像你在App.js里那样传递className props即可，styled-components会自动处理。

内容的提问来源于stack exchange，提问作者Eliot Shedlock