（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>
);
}
}
（3）CSS模块化
安装依赖 style-loader、css-loader
babel-plugin-react-html-attrs（如果安装了这个插件，className 可以直接写成 class）
优点：
- 所有的样式都是local的，解决了命名冲突和全局污染的问题
- class名生成规则灵活，可以此来压缩class名
- 只需引入组件的JS就能搞定组件的所有JS和CSS
npm install style-loader css-loader babel-plugin-react-html-attrs --save
render() {
var colorCss = require('./style/style.css')
return (
<div className="App">
<p className={colorCss.blueColor}></p>
<p >这是一段文字，哈哈</p>
</div>
);
}
（4）JSX样式与Css样式互转（内联样式模式）
在线转换工具：https://staxmanade.com/CssToReact/
render() {
const styleCss = {
header : {
color: 'red',
backgroundColor: '#ccc',
"padding-top": '20px',
paddingBottom: '20px'
}
}
return (
<div className="App">
<p style={styleCss.header}>这是一段文字，哈哈</p>
</div>
);
}