在 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 很少，那么这种情况应该不是问题。