P粉504080992 2023-08-02 20:50:39 0 2 187
我启动了一个Next.js 13应用程序，
我有一个main.modules. css文件
.heading {
font-size: 4rem;
color: #000;
}
.dark .heading {
color: #fff;
}
我使用它来为这样的组件设置样式
import styles from "@/styles/main.module.scss";
export default function Home() {
return (
<>
Hi! I was styled by scss
);
}
来自。heading类的样式被正确应用，但来自。dark .heading的属性没有。
我的主题提供程序确实向HTML元素添加了一个。dark类。
我使用了一个普通的。scss文件，并应用了一个类似这样的类
Hi! I was styled by scss
然后它工作得很好
P粉111227898 2023-08-03 12:21:28 2楼
你可以尝试使用样式。标题。< h1 className = {styles.heading} >你好!我的样式是scss
赞 +0 添加回复
P粉787806024 已被采纳 2023-08-03 10:19:52 1楼
你可以使用:global来声明你正在使用一个全局类
所以main。modules。scss将变成
.heading { font-size: 4rem; color: #000; } :global(.dark) .heading { color: #fff; }为什么会这样呢?
为什么会这样呢?
CSS模块的作用域是它们所使用的组件。
这意味着默认情况下。dark选择器会被编译，并且不会引用全局的。dark类。
赞 +0 添加回复