在vue文件中我们使用scoped来进行css模块化开发,使其样式互不受影响.
但是在react中没有scoped属性, 而react中我们发现css样式设置也存在互相影响的问题.(例如:改变全局样式,设置的样式不起效果,被其他地方的样式覆盖...)
但在react中可以利用module方法来解决:
(1)改样式文件名。从 xx.css -> xx.module.css
(React脚手架中的约定,与普通 CSS 作区分)
(2)将写好的css样式引入到对应组件中。
import styles from "xxx.module.css";
一般命名为styles
(3) 通过 styles 对象访问对象中的样式名来设置样式
注: 避免一个文件有相同的class名称,只生效一个(最后一个覆盖之前所有的)
解析完的类名是一个哈希串。
// css类名是index.module.scss中定义的类名
<div className={styles.css类名}></div>
(4)注意: css类名中如果有 '-' 则要改为styles[ css类名 ]。因为最终这个类名会生成为styles对象上的一个属性。一般推荐使用小驼峰命名法