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

本文介绍了使用CSS模块定位next.js中的Pure元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在将应用程序从React移植到Next，并且我的CSS一直出现错误:"ul"不是纯净的(纯选择器必须至少包含一个本地类或id).

I'm porting an app from React to Next and I keep getting an error with my css: "ul" is not pure (pure selectors must contain at least one local class or id).

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

I'm using css modules and am not sure what the workaround is to keep everything in the css module.

例如:

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
}

推荐答案

尝试为ul标签提供className或id，然后相应地编写样式.

Try giving a className or id to ul tag and then write your styles accordingly.

例如:

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

这篇关于使用CSS模块定位next.js中的Pure元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！