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

【问题标题】：Targeting Pure elements in next.js with CSS modules使用 CSS 模块定位 next.js 中的纯元素
【发布时间】：2020-10-09 13:38:33
【问题描述】：

我正在将一个应用程序从 React 移植到 Next，并且我的 css 不断出现错误：“ul”不是纯的（纯选择器必须包含至少一个本地类或 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
}

【问题讨论】：

【解决方案1】：

尝试为 ul 标记提供 className 或 id，然后相应地编写您的样式。

例如：

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

【讨论】：

【解决方案2】：

如果您不想使用@Zeeshan 回答中提到的类，则不能使用基于模块的 CSS。您将需要使用全局样式表将纯元素定位为选择器。它们不能是组件范围的。

此外，您只能在一处 (_app.tsx/_app.jsx/_app.js) 导入全局样式表，否则会收到错误消息 (explained here)。

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

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

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

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

而不是像这样导入

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

像这样导入

import './styles.scss';

【讨论】：

【解决方案3】：

这个问题可能有点老了，但我想用一种我觉得很容易理解的简单方式来描述另一种方法来做你想做的事。

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

例如：

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

【讨论】：