（1）内联样式
注：样式要采用驼峰命令发，如果非要使用原生css样式写法，需加引号
缺点：一些动画，伪类不能使用
class App extends Component { ?constructor(props) { ???super(props); ???this.state = {date: new Date()}; ?} ?render() { ???const styleCss = { ?????header : { ???????color: ‘red‘, ???????backgroundColor: ‘#ccc‘, ???????"padding-top": ‘20px‘, ???????paddingBottom: ‘20px‘ ?????} ???} ???return ( ?????<div className="App"> ???????<p style={styleCss.header}>这是一段文字，哈哈</p> ?????</div> ???); ?}}内联样式中的表达式：
class App extends Component { ?constructor () { ???super(); ???this.state = { ?????minHeader: false ???}; ?}; ?switchHeader () { ???this.setState({ ?????minHeader:!this.state.minHeader ???}) ?} ?render() { ???const styleCss = { ?????header: { ???????cursor: ‘pointer‘, ???????backgroundColor: ‘red‘, ???????color: ‘#fff‘, ???????padding: (this.state.minHeader) ? ‘10px‘ : ‘30px‘ ?????} ???}; ???return ( ?????<div className="App"> ???????<p style={styleCss.header} onClick={this.switchHeader.bind(this)}>这是一段文字，哈哈</p> ?????</div> ???); ?}}（2）引入css文件
在该文件夹下使用import引入或者在index.html上面使用link引入
注：给html标签添加class属性需使用className
import ‘./style/style.css‘ //创建的css文件class App extends Component { ?render() { ???return ( ?????<div> ???????<p className="blueColor">这是一段文字，哈哈</p> ?????</div> ???); ?}}React（八）CSS
原文地址：https://www.cnblogs.com/yulingjia/p/9723101.html