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

Question

我最近开始使用 Gatsby 来构建我的网站，之前我只依赖纯 html 和 css，所以我可能在这里遗漏了一些非常基本的东西...

我正在尝试为一个看起来像这样的自定义标题组件设置样式

import React from "react"
import MWidth from "./m-width"

import logo from "../resources/images/logo.png"

function Header() {
   return (
      <>
         <MWidth>
            <div>
               <img src={`${logo}`}></img>
            </div>
         </MWidth>
      </>
   )
}

export default Header

在布局组件中导入它后，我尝试使用 styled-components 设置样式

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

但没有任何改变。

我看到这种方法与 Link 组件一起使用，但也许它是以另一种方式定义的。我错过了什么还是只是 Gatsby 错误？

我的 Layout.js 文件如下所示

import React from "react"
import styled from "styled-components"

import Header from "./header"
import Content from "./content"
import Footer from "./footer"

import "./common.css"

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

function Layout(props) {
   return (
      <>
         <PageHeader />
         <Content>{props.children}</Content>
         <Footer />
      </>
   )
}

export default Layout

如果您需要更多信息，请告诉我。任何帮助将不胜感激。

谢谢????

编辑：

事实证明，为了使其工作，您必须将类名附加到您想要设置样式的元素上，并将其作为道具传递。
所以正如 ksav 建议的那样，我添加了 @987654324 @ 进入 Header 函数声明，className={props.className} 进入包装 div。现在看起来像这样

function Header(props) {
   return (
      <div className={props.className}>
         <MWidth>
            <div>
               <img src={`${logo}`}></img>
            </div>
         </MWidth>
      </div>
   )
}

这基本上与他在下面发布的内容相同。这样就解决了问题。

谢谢你????

Answer 1

Styling any component

styled 方法可以完美地在您自己或任何第三方组件上运行，只要它们将传递的 className 属性附加到 DOM 元素。

function Header({className}) {
  return (
    <div className={className}>
        <MWidth>
          <div>
            <img src={`${logo}`}></img>
          </div>
        </MWidth>
    </div>
  )
}