React中用CSS Moudles时,定义类名使用的是:<div className={styles.header}></div>
但我想定义多个类名,达到CSS样式统一和单独控制的效果,一直找不到解决方案,问了下强大的学长找到了解决方法,其中要是使用模板字符串
<div className={[`${styles.nameOne}`,`abc`].join(' ')}></div>
存入数组之中,用join函数在两者之间添加空格。这样的话这个div的类名是 ”nameOne abc“,但是我们操作CSS样式时可以发现,对namene可以进行CSS样式操作,而abc的CSS样式操作不会成功。这是因为abc没有存入styles之中。
要想解决,首先要知道的是styles也是一个对象,它的属性可以用[ ]数组的方法获取到
<div className={[`${styles.nameOne}`,`${styles['abc']}`].join(' ')}></div>
这样的话类名是"nameOne abc",并且可以对nameOne和abc进行CSS样式控制。
我们从后端接口拿到一个数组数据,返回六个div,有共同CSS样式,也有单独CSS样式,可以如下写
<div className={[`${styles.newsTitle}`, `${styles[`newsTitle${index}`]}`].join(' ')}></div>
这样使用各个index值进行区分,共同类名是newsTitle,达到CSS样式的统一和单独设置。