如何向Styled Components传递props实现动态样式控制？

Styled Components 的样式插值函数只能读取直接挂载在 styled 生成组件上的 props。你的代码里只把mode属性传给了自定义的Header组件，没有继续向下传递给内部的Section styled 组件，Section拿到的props.mode值为undefined，三元判断永远走 false 分支，因此背景色一直显示蓝色。

在Header组件内渲染Section时，把接收到的mode属性传给Section即可。

const App = function () {
  const [isDarkMode, setIsDarkMode] = React.useState(true)

  return (
    <main>
      <Header mode={isDarkMode}/>
    </main>
  )
}

const Section = styled.section`
    background-color: ${props => props.mode === true ? "yellow" : "blue"};
    padding: 0 80px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
`

export default function Header (props) {
    return (
        <Section mode={props.mode}>
            <span>Where in the world?</span>
            <FontAwesomeIcon icon={faMoon} />
            <span>DarkMode</span>
        </Section>
    )
}

简化写法 #

如果 Header 组件本身不需要对传入的 props 做额外处理，可以直接用展开运算符全量透传 props 给 Section，减少重复代码：

export default function Header (props) {
    return (
        <Section {...props}>
            <span>Where in the world?</span>
            <FontAwesomeIcon icon={faMoon} />
            <span>DarkMode</span>
        </Section>
    )
}

内容的提问来源于stack exchange，提问作者Ejovi Okiekpakpo