当CSS应用于body或html时，如何在Reactjs上的SPA构建中保持特定于每个页面的CSS属性

Question

对于我的登录页面，我在html上应用了一些css，因为我使用React.js来构建SPA。当我登录后导航到主屏幕时，主体是一样的，所以CSS应用于所有地方。

我如何才能使它特定于只登录页面的假设。

Answer 1

将特定的类应用于其div容器。就是一个例子

.loginContainer{
height:200px
}

在div容器上，您可以在className道具上调用它

<div className="loginContainer">Login container here</div>

Answer 2

如果你想要应用于单个组件的CSS，请查看ShadowDom。在react中实现ShadowDom的一种方法是使用react shadow root，通过使用ShadowDom，CSS不会从组件中泄漏

此处的小型工作示例