使用.modules时不应用样式的问题。在Next.js中
<p>我启动了一个Next.js 13应用程序，<br /><br />我有一个main.modules. css文件</p><p><code></code></p>
<pre class="brush:php;toolbar:false;">.heading {
font-size: 4rem;
color: #000;
}
.dark .heading {
color: #fff;
}</pre>
<p>我使用它来为这样的组件设置样式</p>
<pre class="brush:php;toolbar:false;">import styles from "@/styles/main.module.scss";
export default function Home() {
return (
<>
<Header />
<h1 className={styles["heading"]}>Hi! I was styled by scss</h1>
</>
);
}</pre>
<p>来自。heading类的样式被正确应用，但来自。dark .heading的属性没有。<br /><br />我的主题提供程序确实向HTML元素添加了一个。dark类。<br /><br />我使用了一个普通的。scss文件，并应用了一个类似这样的类</p><p><br /></p>
<pre class="brush:php;toolbar:false;"><h1 className="heading">Hi! I was styled by scss</h1></pre>
<p>然后它工作得很好</p>
2
808
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
你可以尝试使用样式。标题。< h1 className = {styles.heading} >你好!我的样式是scss</h1>
你可以使用:global来声明你正在使用一个全局类
所以main。modules。scss将变成
.heading { font-size: 4rem; color: #000; } :global(.dark) .heading { color: #fff; }为什么会这样呢?
为什么会这样呢?
CSS模块的作用域是它们所使用的组件。
这意味着默认情况下。dark选择器会被编译，并且不会引用全局的。dark类。