如何在 React 中为文件分隔 css 规则？

Question

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

Answer 1

为正文提供独特的 class/id 或为每个页面制作包装 div，例如

<body class="landing-page"> or <div class="landing-page"> 和 <body class="article-page"> or <div class="article-page">

然后像这样写 css：

.lanading-page .your-selector{
    cssrules
}

其他选项：

Answer 2

可以通过某些方式实现作用域CSS。但最好和最简单的方法是 css-modules.

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

Answer 3

我个人认为最简单的方法就是用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>
}

你也可以参考第三个库镭，帮你写的更高级css。 https://formidable.com/open-source/radium/

如果你以后要学react native，你会发现css全是用js写的。希望对您有所帮助。

如何在 React 中为文件分隔 css 规则？

How to separate css rules for files in react?

html

css

css-selectors

css-specificity