React使用className引入多个类样式

在一个元素上设置样式，有一个固定的样式，然后还有一个使用三元运算符根据条件添加的样式。

比如说有一个固定样式"title":
<div className="title">标题</div>，
然后还要一个点击高亮的样式:
<div className={index === this.state.active ? "active" : null}>标题</div>
不能这样写：
<div className="title" className={index === this.state.active ? "active" : null}>标题</div>

那多个样式，有字符串，有表达式，应该怎么写到一起？

 

解答

ES6 模板字符串 ``

className={`title ${index === this.state.active ? 'active' : ''}`}

同样的，如果是通过CSS Modules的写法，则类似

import styles from './DataDetail.css'

<div className={`${styles.row} ${styles.first}`}></div>

最后，再介绍一下行内样式写法：

<div style={{backgroundColor:'red',color:'white',fontSize:40}}>看背景颜色和文字颜色</div>