"It looks like you've wrapped styled() around your React component (Hero), but the className prop is not being passed down to a child."？

Question

我有一个 Hero 组件，用于在我的博客文章中显示英雄图片。一切似乎都在正常工作，但我在控制台中收到此警告：

"It looks like you've wrapped styled() around your React component (Hero), but the className prop is not being passed down to a child. No styles will be rendered unless className is composed within your React component.

这是我的 Hero 组件的代码：

// /components/Hero.js

import React from 'react'
import BgImg from 'gatsby-background-image'
import styled from 'styled-components'

const Hero = props => (
    <BgImg Tag="section"
      className="hero is-large"
       fluid={props.headerImage.childImageSharp.fluid}
       >
       <div className="hero-body">
       </div>
     </BgImg>
);

const StyledHero = styled(Hero)`
  width: 100%;
  background-position: bottom center;
  background-repeat: repeat-y;
  background-size: cover;
`

export default StyledHero

为什么我会收到此警告，我该如何解决？

Answer 1

这是 styled-components 包中的一个警告，我认为开发人员已经解决了。 https://github.com/styled-components

Answer 2

在您的示例中，您没有将 className 传递给任何内部组件，因此不会应用您在 StyledHero 中指定的样式。

让它工作（并消除警告）的方法是像这样传递 className：

const Hero = props => (
    <BgImg Tag="section"
       className={`${props.className} hero is-large`}
       fluid={props.headerImage.childImageSharp.fluid}
       >
       <div className="hero-body">
       </div>
     </BgImg>
);

"It looks like you've wrapped styled() around your React component (Hero), but the className prop is not being passed down to a child."？

"It looks like you've wrapped styled() around your React component (Hero), but the className prop is not being passed down to a child."?

reactjs

gatsby

styled-components