«Похоже, вы обернули styled () вокруг компонента React (Hero), но реквизит className не передается ребенку.»?

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