为什么删除CSS片段不应用于React组件结构?

Question

我一直在努力进行一些调试并找到解决方案。我在React中建立了一个页面。每个组件一个接一个(节下节，一长页)

My App.jsx是这样的:

return (
<>
<Header handleClickShow={handleClickShow}/>
<Nav />
<About />
<Experience />
<Portfolio />
<Contact />
<Footer />
{showGame && <Game />}
</>
);

我的indes.js是下一个:

ReactDOM.render(
<Router>
<App />
</Router>,
document.querySelector("#root")
);

一些组件有一个section标签(不管里面是什么)而index。css中的那个部分有margin

section {
margin-top: 8rem;
}

因此，在每个组件结束后我有8rem的空间。只有按下按钮，我的组件才会显示出来。问题是，当我没有游戏显示我有8rem额外的空间在页脚。我不明白为什么它不会消失。所以当game不存在时，我的组件是隐藏的，但它仍然保留8rem的空间，就像它在index。css

中一样我试着在游戏中加入新的类，并拿走了边际(我在想问题是存在的)。当我在页面上有游戏时，额外的8rem空间在游戏组件下。我试着在App.jsx中做一个div，但没有帮助。我知道，如果我重新设计类属性更接近组件，它应该应用它，但无论我做什么，我仍然有额外的空间。我确实尝试从我的App.jsx中注释出组件，当我刷新页面时，仍然在页脚下，我有额外的8 rem。

如果我在index.css中注释掉部分(一个在代码片段中显示)，那么所有的空间都会消失，包括我有问题的那个，但整个页面不是我需要的方式。也许有人能给我点提示?谢谢你！

当我检查页面时，我有下一个:检查页面这就是那个section标签，特别是那个id="inner-shadow- partner "我不知道那是什么

是否有可能，我在Chrome中使用的外部扩展可能会导致额外的间距或添加额外的元素到页面?

Answer 1

能否添加一个margin为0的class

.no-margin-top {
margin-top: 0;
}

,

return (
<>
<Header handleClickShow={handleClickShow}/>
<Nav />
<About />
<Experience />
<Portfolio />
<Contact />
<Footer />
<section className={!showGame ? 'no-margin-top' : ''}>
{showGame && <Game />}
</section>
</>
);