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'*

所以当我在浏览器中打开网站时，我会转到（索引）页面，这没关系，但是当我转到下一页（第2页）时，请点击返回并转到< strong>（索引）页面样式已更改，因为我在两个css文件中有一些具有相同名称的类，而第二个已加载的css文件（page2.css）已覆盖< strong>（index.css）我该如何解决这个问题。

很抱歉，如果问题不太清楚，

谢谢！

Answer 1

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

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

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

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

这样可行，但我想知道你为什么不使用不同的班级名称？

ReactJS有几个css文件

1 个答案: