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

这是我认为开发人员已解决的样式化组件包中的警告。 https://github.com/styled-components

Answer 2

在您的示例中，您没有将grassBlock.setPosition(Vector2f(i * tile_width, 690));传递给任何内部组件，因此不会应用您在className中指定的样式。

使其工作（并且摆脱警告）的方法是像这样向下传递StyledHero：

className

“看起来您已经将styled（）包裹在React组件（Hero）周围，但是className属性没有传递给孩子。”

2 个答案: