在 NextJs 中，如何刪除在特定組件的 _app 中聲明的全局 styles？

Question

我正在使用 NextJs，我正在使用 TailwindCSS，我的 globals.css 中有一堆額外的 styles，它按照您應該做的那樣導入到頂層的 _app 中。 我嘗試將它向下移動到我的“布局”組件中，但它給出了將其放回頂部的錯誤，所以我將它保留在那里。

這就是問題所在。 我有一個組件，我不想要任何 globals.css styles，只有一小部分備用 styles。有什么辦法可以做到這一點？ 我想刪除我被迫在頂層導入的所有廢話，然后只將特定樣式表應用於該組件。

Answer 1

實現此目的的一種方法是在 globals.css styles 中使用非選擇器。

例如，添加 className="no-global-styles"（到您不需要全局樣式的組件）

然后附加全局樣式選擇器：not(.no-global-styles)選擇器

:not(.no-global-styles) > a {
     color: black;
     text-decoration: none;
     cursor: pointer;
}

這將適用於所有 <a?> 元素，但 class '.no-global-styles' 和 <a?> 內部的元素除外 '.no-global-styles' 將默認應用 styles 或下一個 styles。 我能想到的另一種方法是使用 .important 標志並覆蓋 globals.css 樣式。

（選擇器鏈接） https://www.w3schools.com/cssref/css_selectors.asp

（鏈接：not() 技巧） https://css-tricks.com/almanac/selectors/n/not/

我覺得這不是最好的方法，但如果你想忽略的 styles 很少，那么這種情況應該不是問題。