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

Styling custom component in GatsbyJS using styled-components(使用样式化组件在GatsbyJS中设置自定义组件的样式)

问题描述

我最近开始使用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添加到头函数声明中，className={props.className}添加到包装器div中。现在它看起来像这样

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

这与他在下面发布的基本上是同一件事。这就解决了问题。

谢谢😄；

推荐答案

Styling any component

styled方法在您自己的所有组件或任何第三方组件上都可以完美地工作，只要它们将传递的className道具附加到DOM元素。

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

这篇关于使用样式化组件在GatsbyJS中设置自定义组件的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！