React: class 和 style
一、class
1、在react中使用className属性来绑定类名
<div className="header flex-middle-middle">添加2个类名
</div>
2、动态添加类名
<div className={`item ${name=='active' ? 'active' : ''}`}>动态添加active类名
</div>
二、style
1、react中内联样式放到{{}}中，样式之间用,隔开。
<div style={{color:'red',fontSize:12}}>这是内联样式
</div>
2、动态添加样式
<div style={{display: (show? "block" : "none"), "color":"yellow"}}>根据show来决定是否显示
</div>
三、样式冲突解决办法
Vue项目中有scoped属性限制，一般不会发生样式冲突的问题。
React项目中css是全局的，所以不同组件之间的样式经常出现覆盖互相影响的问题。避免的方法之一是：使用module方法来解决，具体如下：
1、css/less/scss文件的命名写成**.module.css **.module.less **.module.scss等。
// header.module.less 文件
.header {height: 80px;font-size: 30px;color: #000000;font-weight: 600;text-align: center;
}
2、组件中引入并使用
import styles from './header.module.less';
<div className={styles.header}>这是Header</div>