使用CSS模块定位next.js中的Pure元素 [英] Targeting Pure elements in next.js with CSS modules

问题描述

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

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

index.module.css

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

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