Reactjs 盖茨比图像背景滑块触发类型错误：无法读取属性'；风格'；未定义的

我在我的项目中使用了

gatsby图像背景滑块

，它触发了

TypeError:无法读取未定义的changeIndex src/index.js:111回调src/index.js:129的属性'style'

同一个英雄最初工作，但在开发过程中，它开始给出这个错误。我已经重新安装了软件包，尝试了一个新的hello world项目，使用相同的代码

    Hero.js

    import React from "react"
    import { useStaticQuery, graphql } from "gatsby"
    import BackgroundSlider from 'gatsby-image-background-slider'
    
    const Hero = ({ children }) => (
      <>
        <main>{children}</main>
        <BackgroundSlider
          query={useStaticQuery(graphql`
            query {
              backgrounds: allFile (filter: {sourceInstanceName: {eq: "backgrounds"}}){
                nodes {
                  relativePath
                  childImageSharp {
                    fluid (maxWidth: 4000, quality: 100){
                      ...GatsbyImageSharpFluid
                    }
                  }
                }
              }
            }
          `)}
          initDelay={2}
          transition={4}
          duration={8}
          images={["picture2.jpg", "picture2.jpg"]}
        >
        </BackgroundSlider>
      </>
    )
    
    export default Hero

Hero.js
从“React”导入React
从“盖茨比”导入{useStaticQuery，graphql}
从“盖茨比图像背景滑块”导入背景滑块
const Hero=（{children}）=>(
{儿童}
)
导出默认英雄

您知道是什么原因导致了这种情况吗？
（以及其他示例），添加
initDelay
、
transition
或
duration
道具
似乎也会迫使组件接收
style
道具。因为您没有传递它，所以它会破坏依赖代码

如果不打算添加任何
样式
属性，只需使用虚拟样式，例如：

    <BackgroundSlider
      query={useStaticQuery(graphql`
        query {
          backgrounds: allFile (filter: {sourceInstanceName: {eq: "backgrounds"}}){
            nodes {
              relativePath
              childImageSharp {
                fluid (maxWidth: 4000, quality: 100){
                  ...GatsbyImageSharpFluid
                }
              }
            }
          }
        }
      `)}
      initDelay={2}
      transition={4}
      duration={8}
      style={{`display: initial`}}
      images={["picture2.jpg", "picture2.jpg"]}
    >
    </BackgroundSlider>

请注意，如果没有沙箱，您可能需要对代码片段进行一些调整，特别是使用
样式
道具
，但您知道了。
样式
道具
在哪里？我使用全局css。谢谢您的回答！由于某些原因，添加样式道具无法解决此问题。真奇怪。你能升级软件包版本吗？另外，如果删除
initDelay
、
transition
、
duration
和
style
道具，会发生什么？它是否一直中断？遗憾的是，没有解决或更改错误。您使用的是哪个版本？
“盖茨比”：“^2.26.1”，“盖茨比背景图像”：“^1.3.1”，“盖茨比图像”：“^2.9.0”，“盖茨比图像背景滑块”：“0.0.4”，
const SimpleSlider=()=> {
  const data = useStaticQuery(graphql`
      query {
          backgrounds: allFile (filter: {sourceInstanceName: {eq: "backgrounds"}}){
              nodes {
                  relativePath
                  childImageSharp {
                      fluid (maxWidth: 4000, quality: 100){
                          ...GatsbyImageSharpFluid
                      }
                  }
              }
          }
      }
  `)

  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1
  };

  return <div>
      <h2> Single Item</h2>
      <Slider {...settings}>
        { backgrounds.nodes.map(background =>{
            return <BackgroundImage
              Tag="section"
              className={`yourClassName`}
              fluid={background.childImageSharp.fluid}
              backgroundColor={`#040e18`}
              style={{`height:100%; width:100%`}}
            />
          })}
      </Slider>
    </div>
}