CSS Moudles定义多个类名

React中用CSS Moudles时,定义类名使用的是:


但我想定义多个类名,达到CSS样式统一和单独控制的效果,一直找不到解决方案,问了下强大的学长找到了解决方法,其中要是使用模板字符串

存入数组之中,用join函数在两者之间添加空格。这样的话这个div的类名是 ”nameOne abc“,但是我们操作CSS样式时可以发现,对namene可以进行CSS样式操作,而abc的CSS样式操作不会成功。这是因为abc没有存入styles之中。
要想解决,首先要知道的是styles也是一个对象,它的属性可以用[ ]数组的方法获取到

这样的话类名是"nameOne abc",并且可以对nameOne和abc进行CSS样式控制。


我们从后端接口拿到一个数组数据,返回六个div,有共同CSS样式,也有单独CSS样式,可以如下写

这样使用各个index值进行区分,共同类名是newsTitle,达到CSS样式的统一和单独设置。

你可能感兴趣的:(CSS Moudles定义多个类名)