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>