Javascript Reactjs，CSS-为什么我的网格不'；不能正确地显示元素

我目前正在盖茨比框架下使用Reactjs和GridCss。我正试图在Gatsby layout.js文件的子组件中构建子网格。 但是，当我完成网格设置后，子组件无法在其良好位置显示组件。当我试图在Firefox浏览器上使用特殊的Firefox插件显示网格时，网格无法显示

页脚组件是从名为footer.js的文件导入的。通常，页脚包含两列，一列用于社交媒体项目，另一列用于订阅新闻稿表单。 所有内容都显示得很好，但页脚没有显示，这是无法显示的页脚网格

这里是my layout.js：

<div >
    <div className={style.header}>
      <div className= {style.headbar}> 
        <div className={style.headerLeft}>
          <Logo className={style.logo} /> 

        </div>
        <div className={style.headerRight}>
          <Menu className={style.menu}/> 
        </div>
      </div>
     </div>
    <Chat/>

   <div className={style.children}>
    {children()} 
    </div>

    <div> 
    <Footer  className={style.footer} /> // everything is well display but not the footer, this is the footer grid which fails to display well

    </div>
  </div>

从footer.js°导入的my footer.js°：

export default () => {
  return (
    <div className={style.footer_grid}>
            <div className={style.social_media}>
             social media
            </div>
            <div className={style.newsletter_subscription}>
            subscriptionewsletter
            </div>
    </div>
  )
}

尽管我一直小心地遵守所有网格规则，但我的网格未能正确显示

如果有人有任何暗示，那就太好了，

---

谢谢

回答：在盖茨比，你必须命名你的css模块文件名。module.css

回答：在盖茨比，你必须命名你的css模块文件名。module.csp请将此作为一个答案发布，以便其他人将来可能受益。

export default () => {
  return (
    <div className={style.footer_grid}>
            <div className={style.social_media}>
             social media
            </div>
            <div className={style.newsletter_subscription}>
            subscriptionewsletter
            </div>
    </div>
  )
}

.footer_grid{       
width: 100vw; 
display:grid;
grid-template-areas: 
    "footer_social_media  footer_newsletter_subscription";
grid-template-columns:  2.5fr 1fr; 
} 

.social_media{ 
grid-area: footer_social_media;
display : flex; 
justify-content: center; 
align-items: center
}

.newsletter_subscription{ 
grid-area: footer_newsletter_subscription; 
display : flex; 
justify-content: end; 
align-items: start;
}