如何用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覆蓋的內容。