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