问题描述
我正在使用 NextJs 和 TailwindCSS,并且我的 globals.css 中有一堆额外的样式,这些样式按您应该做的那样导入到顶层的 _app 中。我尝试将其向下移动到我的“布局”组件中,但它给出了将其放回顶部的错误,因此我将其保留在那里。
问题来了。我有一个组件,我不想要任何 globals.css 样式,只有一小组备用样式。有没有办法做到这一点?我想删除我被迫在顶层导入的所有废话,然后将特定的样式表应用于该组件。
解决方法
实现此目的的一种方法是在 globals.css 样式中使用 not 选择器。
例如添加 className="no-global-styles"(对于不需要全局样式的组件)
然后用 :not(.no-global-styles) selector
附加全局样式选择器:not(.no-global-styles) > a {
color: black;
text-decoration: none;
cursor: pointer;
}
这将适用于所有 元素,除了 '.no-global-styles' 和 类中的元素,将应用默认样式或下一个样式.我能想到的另一种方法是使用 !important 标志并覆盖 globals.css 样式。
(选择器链接)https://www.w3schools.com/cssref/css_selectors.asp
(:not() 技巧的链接)https://css-tricks.com/almanac/selectors/n/not/
我觉得这不是最好的方法,但如果您想忽略的样式很少,那么这种情况应该不是问题。