使用.modules時不套用樣式的問題。在Next.js中
P粉504080992
2023-08-02 20:50:39
<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>
你可以嘗試使用樣式。標題。 < h1 className = {styles.heading} >你好!我的樣式是scss</h1>
你可以使用:global來宣告你正在使用一個全域類別
所以main。 modules。 scss將變成
.heading { font-size: 4rem; color: #000; } :global(.dark) .heading { color: #fff; }為什麼會這樣呢?
為什麼會這樣呢?
CSS模組的作用域是它們所使用的元件。
這表示預設情況下。 dark選擇器會被編譯，並且不會引用全域的。 dark類。