使用 CSS 模块定位 next.js 中的纯元素

Question

我正在将一个应用程序从 React 移植到 Next，但我的 css 一直出现错误：“ul”不是纯的（纯选择器必须至少包含一个本地类或 id）。

我正在使用 css 模块，但不确定将所有内容保留在 css 模块中的解决方法。

例如：

索引.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)导入全局样式表，否则您将收到错误消息（在此处解释）。

您可以在许多样式表中分解您的样式，但它们都必须是全局的，因此这样做可能没有什么好处。

为了直接引用从这个Next.js GitHub的论坛：

您收到此错误是因为您在可能是[filename].module.(css | scss | sass)的文件扩展名中直接使用 html 标记而不是类名或 ID

带有 * .module.(css | scss | sass) 的文件扩展名是 css 模块，它们只能使用类名或 id 来定位元素，而不能使用标签名称。尽管这在 create-react-app 等其他框架中是可能的，但在 next-js 中是不可能的。

我的建议是在不包含“.module”的单独文件中使用这些 html 选择器 css。示例：[文件名].(css | scss | sass) -->样式.scss

而不是像这样导入

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

像这样导入

import './styles.scss';

Answer 2

这其实非常简单。

您可以将容器类添加到顶部元素（就像您所做的那样），然后使用组合器（ 、+、>等）根据需要定位纯元素。

例如：

索引.js：

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

索引.模块.css：

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

Answer 3

尝试给 ul 标记一个 className 或 id，然后相应地编写您的样式。

例如：

索引.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;
}