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