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

Posted 2023-03-15

【中文标题】在 GatsbyJS 中使用 styled-components 设置自定义组件的样式

【英文标题】：Styling custom component in GatsbyJS using styled-components

【发布时间】：2020-07-10 16:13:10

【问题描述】：

我最近开始使用 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>
   )

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

谢谢你????

【问题讨论】：

你想要背景颜色在哪里？

作为标题组件的背景，但我不想在组件内部设置颜色，因为它会随着每个页面而改变。

【参考方案1】：

Styling any component

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

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

【讨论】：

非常感谢！我不知道我是怎么错过那个页面的，但我很高兴你帮我找到了它。