在GatsbyJS中使用styled-components为自定义组件设置样式的问题

我刚从纯HTML/CSS转到Gatsby开发时也遇到过一模一样的问题！你用styled(Header)创建样式化组件的思路是对的，但自定义组件和Gatsby内置的Link组件不一样——自定义组件需要主动接收并传递className属性，styled-components才能把样式正确挂载上去。

问题原因 #

styled-components 在包装组件时，会生成一个唯一的className并传递给目标组件，但如果你的自定义组件没有把这个className传递给内部的根元素，样式就找不到可以附着的节点，自然不会生效。而像Link这类内置组件已经帮我们处理了这个逻辑，所以直接用就行。

解决方案 #

修改你的Header组件，让它接收props，并把props.className绑定到根元素上：

import React from "react"
import MWidth from "./m-width"
import logo from "../resources/images/logo.png"

function Header(props) { // 接收props参数
  return (
    <div className={props.className}> {/* 将className传递给根div */}
      <MWidth>
        <div>
          <img src={`${logo}`} alt="Logo"></img>
        </div>
      </MWidth>
    </div>
  )
}
export default Header

这样再用styled(Header)创建的PageHeader组件，它的样式就会正确应用到Header的根div上，你设置的background-color: #f0f就能正常显示了。

验证你的代码 #

修改后的Layout.js不需要变动，依然可以正常使用PageHeader：

const PageHeader = styled(Header)`
  background-color: #f0f;
`

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