CSS Moudles定义多个类名

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样式的统一和单独设置。