React--样式篇

（1）.直接通过 style 编写

eg:

var myStyle = {
    fontSize: 100,
    color: '#FF0000'
};
ReactDOM.render(
    <h1 style = {myStyle}>菜鸟教程</h1>,
    document.getElementById('example')
);

（2）通过className

2.1单个class

 eg:

import classNames from 'classnames';
import styles from '样式文件路径';
ReactDOM.render(
    <h1 className={styles.myStyle}>菜鸟教程</h1>,
    document.getElementById('example')
);

2.2多个class

import classNames from 'classnames';
import styles from '样式文件路径';
ReactDOM.render(
    <h1 className={classNames(styles.myStyle,styles.active)}>菜鸟教程</h1>,
    document.getElementById('example')
);

2.3条件class

import React from 'react';
import classNames from 'classnames';
import styles from './table.less';

class Table extends React.Component {
	constructor(props) {
	  super(props);
	  this.state = { flag:0};
	}
	isActive(index,e){this.setState({flag : index})}
  	render(){
  		const list = ['今天','昨天','本周','本月'] 
  		const itemLIst = list.map((item,index)=>{
  			return
 <span className={classNames(styles.myStyle,{[styles.active]: this.state.flag==index})} key={index} onClick={(e)=>this.isActive(index,e)}>{item}</span>
  		})
	    return(<div>{itemLIst} </div>)
  }
}

export default Table;

2.4 条件class三元运算符

import React from 'react';
import classNames from 'classnames';
import styles from './table.less';

class Table extends React.Component {
	constructor(props) {
	  super(props);
	  this.state = { flag:0};
	}
	isActive(index,e){this.setState({flag : index})}
  	render(){
  		const list = ['今天','昨天','本周','本月'] 
  		const itemLIst = list.map((item,index)=>{
   			return <span className={classNames(styles.myStyle,this.state.flag==index?styles.active:'')} key={index} onClick={(e)=>this.isActive(index,e)}>{item}</span>

  		})
	    return(<div>{itemLIst} </div>)
  }
}

export default Table;

更多详情 ，请看文档https://www.npmjs.com/package/classnames