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

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

本文介绍了使用样式化组件在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中设置自定义组件的样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:使用样式化组件在GatsbyJS中设置自定义组件的样式

基础教程推荐