标签：style point back span html rop render 驼峰 命令
（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> ); } }
标签：style point back span html rop render 驼峰 命令
原文地址：https://www.cnblogs.com/yulingjia/p/9723101.html
