我正在將一個應用從React移植到Next，我的css一直出現錯誤:“ul”不是純的(純選擇器必須包含至少一個本地類或id)。

我正在使用css模塊，但我不確定如何將所有內容都保存在css模塊中。

例如:

索引. js

<div className={styles.container}>
  <ul>
    <li>Person One</li>
  </ul>
</div>

索引.模塊. css

.container{
  background-color: pink;
}
ul{
  list-style-type: none; //this throws an error
}

如果你不想像@Zeeshan的回答中提到的那樣使用類，就不能使用基于模塊的CSS。您需要使用一個全局樣式表將純元素作為選擇器。它們不能是組件范圍的。

此外，您只能在一個地方導入全局樣式表(_app.tsx/_app.jsx/_app.js)，否則您會收到一個錯誤(在此解釋)。

您可以將您的樣式分散在許多樣式表中，但是它們都必須是全局的，所以這樣做可能沒有什么好處。

直接引用Next.js GitHub論壇:

您收到此錯誤是因為您正在直接使用html標簽 而不是文件擴展名中的類名或id [文件名].模塊.(css | scss | sass)

帶有*模塊的文件擴展名.(css | scss | sass)是css模塊 它們只能以使用類名或id的元素為目標，而不能 使用標記名。雖然這在其他框架中也是可能的，比如 create-react-app，在next-js中是不可能的。

我的建議是在一個單獨的文件中使用這些html選擇器css 不包含'.“模塊”在里面。示例:[文件名]。(css | scss | sass)-& gt；styles.scss

而不是像這樣進口

從'導入樣式。/styles . module . scss '；

像這樣導入

“導入”。/styles . scss '；

這其實極其簡單。

您可以向頂層元素添加一個容器類(就像您所做的那樣)，然后使用組合子(，+，& gt等。)隨心所欲的針對純元素。

例如:

index.js:

<div className={styles.container}>
    <ul>
        <li>Person One</li>
    </ul>
</div>

index.module.css:

.container {
  background-color: pink;
}
.container ul {
  list-style-type: none;
}

嘗試給ul標記一個類名或id，然后相應地編寫您的樣式。

例如:

索引. js

<div className={styles.container}>
 <ul className={styles.container__list}>
  <li>Person One</li>
 </ul>
</div>

索引.模塊. css

.container {
  background-color: pink;
}
.container__list{
  list-style-type: none;
}