使用 CSS 模塊針對 next.js 中的純元素

Question

我正在將一個應用程序從 React 移植到 Next，並且我的 css 不斷出現錯誤：“ul”不是純的（純選擇器必須包含至少一個本地 class 或 id）。

我正在使用 css 模塊，但不確定解決方法是將所有內容保留在 css 模塊中。

例如：

index.js

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

index.module.css

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

Answer 1

如果您不想使用@Zeeshan 的回答中提到的類，則不能使用基於模塊的 CSS。 您將需要使用全局樣式表將純元素定位為選擇器。 它們不能是組件范圍的。

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

您可能會在許多樣式表中破壞您的 styles，但它們都必須是全局的，因此這樣做可能沒有什么好處。

直接從這個 Next.js GitHub 討論論壇引用：

您收到此錯誤是因為您直接使用 html 標記而不是文件擴展名中的類名或 ids，可能是[filename].module.(css | scss | sass)

帶有 * .module.(css | scss | sass)的文件擴展名是 css 模塊，它們只能使用類名或 id 來定位元素，而不能使用標簽名。 雖然這在 create-react-app 等其他框架中是可能的，但在 next-js 中是不可能的。

我的建議是在不包含“.module”的單獨文件中使用這些 html 選擇器 css。 示例： [文件名].(css | scss | sass) --> styles.scss

而不是像這樣導入

import styles from './styles.module.scss';

像這樣導入

import './styles.scss';

Answer 2

嘗試為 ul 標簽提供 className 或 id，然后相應地編寫您的 styles。

例如：

index.js

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

index.module.css

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

Answer 3

這實際上非常簡單。

您可以將容器 class 添加到頂部元素（就像您所做的那樣），然后使用組合器（ , + , >等）根據需要定位純元素。

例如：

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;
}