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组件一起使用，但是也许是以另一种方式定义的。我错过了什么还是仅仅是盖茨比的错误？

我的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 所示，我添加了{ {1}}进入Header函数声明，props进入包装div。现在看起来像这样

className={props.className}

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

谢谢?

Answer 1

Styling any component

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

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

使用样式化组件在GatsbyJS中样式化自定义组件

编辑：

1 个答案: