Reactjs 导入样式化组件时未导入组件内容

我正在使用Reaction构建一个网站，并已决定使用样式组件.我有一个组件，这是与样式组件样式，并从我的主页，我正在使用这个组件的一个实例的props .我有样式被拉到主页，但它没有拉在组件的内容.如果我只是拉入整个组件，它会很好地拉入内容，但不允许我通过props ，但如果我导入组件样式，它不会拉入组件的内容，但props 会正确通过.因此，我需要一些帮助，如何拉在内容和风格，并让props 通过.

我对Gatsby和样式组件非常陌生，所以谢谢您的帮助.

My Component Code个

import React from 'react'
import styled from "styled-components"
import { useStaticQuery, graphql } from 'gatsby'

export const WhyChooseSection = styled.section`
  border-bottom: 1px solid var(--charcoal);
`

export const WhyChooseH2 = styled.h2`
  display: ${(props) => props.displayH2};
  text-align: center;
`

export const WhyChooseContent = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding-top: 40px;
  padding-bottom: 40px;
  column-gap: 100px;
  row-gap: 30px;

  @media(min-width: 992px) {
    justify-content: space-between;
    column-gap: 0;
  }

  .why-icon {
    width: 180px;
    height: 145px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;

    p {
      margin-bottom: 0;
      font-size: 19px;
      font-weight: var(--font-bold);
    }
  }
`

export function WhyChooseIcons() {
  const data = useStaticQuery(graphql`
    {
      whyChooseIcons: allWp {
        nodes {
          acfOptionsOfficeSettings {
            whyChooseInteriorDetails {
              whyChooseIcons {
                whyChooseIconGraphic {
                  altText
                  id
                  sourceUrl
                }
                whyChooseIconTitle
              }
            }
          }
        }
      }
    }
  `)

  return (
    <>
    {data.whyChooseIcons.nodes.map((node, index) => (
      <WhyChooseSection key={index}>
        <WhyChooseH2>Why Choose Interior Details?</WhyChooseH2>
        <WhyChooseContent>
          {node.acfOptionsOfficeSettings.whyChooseInteriorDetails.whyChooseIcons && node.acfOptionsOfficeSettings.whyChooseInteriorDetails.whyChooseIcons.map((item) => (
            <div className='why-icon' key={item.whyChooseIconGraphic.id}>
              <img src={item.whyChooseIconGraphic.sourceUrl} alt={item.whyChooseIconGraphic.altText} />
              <p>{item.whyChooseIconTitle}</p>
            </div>
          ))}
        </WhyChooseContent>
      </WhyChooseSection>
    ))}
    </>
  )
}

export default WhyChooseIcons

My Homepage Code个

import * as React from "react"
// import styled from "styled-components"
import { graphql } from 'gatsby'

import Seo from "../components/seo"
import Hero from '../components/heroComponent'
import { WhyChooseSection } from '../components/whyChooseIcons'
import { WhyChooseH2 } from '../components/whyChooseIcons'
import { WhyChooseContent } from '../components/whyChooseIcons'
import HomeProducts from '../components/homeProducts'
import HomeTestimonials from '../components/testimonials'
import HomeNewHomes from '../components/homeNewHomes'
import HomeFamilyTreatment from '../components/homeFamilyTreatment'
import HomeSolutions from '../components/homeSolutions'
import HomeMotorization from '../components/motorizationComps'
import HomeBrands from '../components/homeBrands'
import CTAOne from '../components/ctaOne'

const IndexPage = (hero) => {
  const heroData = hero.data.homeHero

  return (
    <>
      {heroData.edges.map(({ node }, index) => (
        <Hero key={index} heroTitle={node.template.homePage.heroH1} heroSubTitle={node.template.homePage.heroParagraph} heroBg={node.template.homePage.heroBackground.gatsbyImage} heroBtnOneText={node.template.homePage.heroButton1Text} heroBtnOneURL={node.template.homePage.heroButton1Url} heroBtnTwoText={node.template.homePage.heroButton2Text} heroBtnTwoURL={node.template.homePage.heroButton2Url} />
      ))}
      <WhyChooseSection>
        <WhyChooseH2 displayH2="none"></WhyChooseH2>
        <WhyChooseContent></WhyChooseContent>
      </WhyChooseSection>
      <HomeProducts />
      <HomeTestimonials />
      <HomeNewHomes />
      <HomeFamilyTreatment />
      <HomeSolutions />
      <HomeMotorization />
      <HomeBrands />
      <CTAOne />
    </>
  )
}

export default IndexPage

export const Head = () => <Seo title="Home" />

export const HeroContent = graphql`
  {
    homeHero: allWpPage(filter: {template: {templateName: {eq: "Home Template"}}}) {
      edges {
        node {
          template {
            ... on WpHomeTemplate {
              homePage {
                heroH1
                heroParagraph
                heroButton1Text
                heroButton1Url
                heroButton2Text
                heroButton2Url
                heroBackground {
                  gatsbyImage(placeholder: BLURRED, width: 1920)
                  altText
                }
              }
            }
          }
        }
      }
    }
  }
`