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>