ReactJS 几个 css 文件

Question

我正在使用 ReactJS 构建一个 SPA，但是在样式方面我有一个问题，所以我有 3 个不同的页面（我将来会添加更多页面）所以每个文件都有自己的 css 文件我像这样导入这些文件

*index.jsx
import index form './index.css'*

*page2.jsx
import page3 form './index.css'*

*page3.jsx
import page3 form './index.css'*

所以当我在浏览器中打开网站时，我会转到 (index) 页面，但当我转到下一页 (page2) 时，然后单击返回并转到 (index) 页面样式已更改，因为我在两个 css 文件中有一些具有相同名称的类，并且已加载的第二个 css 文件 (page2.css) 已覆盖 (index.css) 我该如何解决这个问题。

对不起，如果问题不是很清楚，

谢谢！

Answer 1

您需要找到一种方法来区分不同的上下文。没有看到代码很难说，但是如果每个页面中都有一个父元素，您可以应用一个 id，您可以将其包含在您的 css 选择器中，以定位您在每种情况下实际想要设置样式的元素。

div#inIndex .myStyle {
    /* styles */
}

div#inPage2 .myStyle {
    /* styles */
}

div#inPage3 .myStyle {
    /* styles */
}

这可行，但我想知道为什么您不只使用不同的类名？