1

I have a Hero component that I'm using to display hero images on my blog posts. Everything seems to be working correctly but I'm getting this warning in the console:

"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.

Here is the code for my Hero component:

// /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

Why am I getting this warning and how can I fix it?

taylor018
  • 351
  • 2
  • 16
  • 2
    Duplicate: https://stackoverflow.com/questions/53332428/styled-components-is-saying-wrapped-styled-around-your-react-component-compon/53333912#53333912 – Matt Carlotta May 14 '19 at 02:01

2 Answers2

0

In your example, you do not pass the className to any internal component, thus the styles you've specified in StyledHero do not get applied.

The way to make it working (and also get rid of the warning) is to pass the className down like this:

const Hero = props => (
    <BgImg Tag="section"
       className={`${props.className} hero is-large`}
       fluid={props.headerImage.childImageSharp.fluid}
       >
       <div className="hero-body">
       </div>
     </BgImg>
);
Kostiantyn Ko
  • 2,087
  • 1
  • 18
  • 16
-1

This was a warning in the styled-components package that I think the dev's have addressed. https://github.com/styled-components

Michael Ossig
  • 205
  • 2
  • 9