时间戳

首页 > 解决方案 > 使用 CSS 模块定位 next.js 中的纯元素

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

问题描述

我正在将一个应用程序从 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
}

标签： javascriptcssreactjs

解决方案

如果您不想使用@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) --> styles.scss

而不是像这样导入

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

像这样导入

import './styles.scss';

推荐阅读