Html 如何为react中的文件分离css规则？

我正在用reactjs写两页。一个是登录页，另一个是文章页。我遇到的问题是，登录页面的CSS规则影响了文章页面的外观。我认为这与reactjs有关，因为它将所有CSS文件捆绑到一个文件中。如何将每个页面的CSS规则分开，以便一个页面的CSS规则不会影响另一个页面的外观？

为body指定唯一的class/id，或者为每个页面创建一个包装div，如

或

和

或

然后编写css，如：

.lanading-page .your-selector{
    cssrules
}

其他选择：

---

可以通过某些方式实现范围CSS。但最好最简单的方法是

---

此外，您可能会发现本文很有用。

我个人认为最简单的方法是用js编写css。没有必要将css与js分开。把它们写在一起。 比如说,

const newComponent=props=>{
   <div style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
     <button type="primary">Confirm</button>
     <button type="primary">Cancel</button>
   </div>
}

const newComponent=props=>{
证实
取消
}

您还可以参考第三个库radium，它可以帮助您编写更高级的css

如果您将来要学习react native，您会发现所有css都是用js编写的。

---

我希望这会有所帮助。

只是一个建议，但当我使用react时，我使用了范围样式。就我个人而言，我喜欢使用一个包含组件所有信息的单一文件的方法。这个问题与React无关，您似乎还不知道如何为web页面构建CSS。您需要将某个页面的所有CSS规则包装在“父”规则下，以便将它们封装起来。使用SCS或使用

样式化组件的自动操作更容易。我建议给每个页面的包装器元素一个不同的类，比如
div class=“page--home”
等等，然后使用该类作为该页面所有规则的前缀。感谢链接，它确实帮助我了解了CSS模块。