使用樣式組件在 GatsbyJS 中設置自定義組件的樣式

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

將其導入布局組件后，我嘗試使用樣式組件對其進行樣式設置

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建議的那樣，我將props添加到 Header 函數聲明中，並將className={props.className}到包裝器 div 中。 現在看起來像這樣

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

這與他在下面發布的內容基本相同。 這解決了問題。

謝謝😄

Answer 1

設計任何組件

只要將傳遞的className附加到 DOM 元素， styled方法就可以在您自己的或任何第三方組件上完美運行。

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