如何用React解决样式表问题？

Question

我正在用React.js进行项目，我的反应代码login.scss，dashboard.css中有三个scss文件，还有一个名为index.scss的主要scss文件。

我的index.scss文件具有一种通用样式，并且将两个scss文件都导入了index.scss中。 但是我的样式在页面中很重要，因此我的设计无法正常进行。 我该如何克服这个问题？

Answer 1

我假设index.scss是您的默认样式，而dashboard.scss和login.scss是您更特定的样式表。 因此，给定index.scss与其他任何一个工作表之间的冲突，您希望给特定的样式表优先。 在这种情况下，您需要@import index.scss到其他工作表。

CSS从上到下读取，因此位于底部的工作表（即， 导入另一工作表的工作表）将具有优先权。 如果dashboard.scss包含@import，则在index.scss和dashboard.scss中具有相同属性的所有类，标签等都将从dashboard.scss中分配该属性。

例如：

index.scss

.some-class {
   color: red
}

dashboard.scss

@import index.scss
.some-class {
   color: blue;
}

在这种情况下，具有.some-class的元素将具有蓝色字体。

或者，您可以在html页面的<link>标记中包含每个工作表，并在顶部放置index.scss，因为HTML中对CSS的上下阅读相同。

如果index.scss中有任何您不想覆盖的内容，则可以将!important应用于该规则。 但是，应尽可能避免这种情况，理想情况下，您只会在dashboard.scss中编写您不希望被index.scss覆盖的内容。