时间戳

首页 > 解决方案 > 在 NextJs 中，如何删除特定组件中 _app 中声明的全局样式？

javascript - 在 NextJs 中，如何删除特定组件中 _app 中声明的全局样式？

问题描述

我正在使用 NextJs 并且正在使用 TailwindCSS，并且我的 globals.css 中有一堆额外的样式，这些样式按照您应该做的那样导入到顶层的 _app 中。我尝试将它向下移动到我的“布局”组件中，但它给出了将其放回顶部的错误，所以我将它保留在那里。

这是问题所在。我有一个不需要任何 globals.css 样式的组件，只有一小组备用样式。有没有办法做到这一点？我想删除我被迫在顶层导入的所有废话，然后将特定的样式表应用于该组件。

标签： javascriptcssnext.jscss-modules

解决方案

实现此目的的一种方法是在 globals.css 样式中使用 not 选择器。

例如添加 className="no-global-styles" （到你不需要全局样式的组件）

然后用 :not(.no-global-styles)选择器附加全局样式选择器

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

这将适用于所有 <a?> 元素，除了类 '.no-global-styles' 中的元素和 '.no-global-styles' 中的 <a?> 将具有默认样式或应用下一个样式。我能想到的另一种方法是使用 !important 标志并覆盖 globals.css 样式。

（选择器链接）https://www.w3schools.com/cssref/css_selectors.asp

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

我有一种感觉，这不是最好的方法，但如果你想忽略的样式很少，那么这种情况应该不是问题。

推荐阅读