内联样式

是官方推荐的一种css样式的写法：
- style接受一个采用小驼峰命名属性的js对象，而不是css字符串
- 并且可以引用state中的状态来设置相关的样式
内联样式的优点：
- 内联样式，样式之中不会有冲突
- 可以冬天获取当前state中的状态
内联样式的缺点：
- 写法上都需要使用驼峰标识
- 某些样式没有提示
- 大量的样式，代码混乱
- 某些央视无法编写（比如伪类/伪元素）
所以官方依然希望内联样式和普通样式来结合编写

例子：

jsx

import React, { PureComponent } from 'react'

export class App extends PureComponent {
  constructor() {
    super()

    this.state = {
      titleSize: 30
    }
  }
  render() {
    const { titleSize } = this.state

    return (
      <div>
        <button onClick={e => this.setState({titleSize: titleSize+5})}>bigger</button>
        <h2 style={{color: "pink", fontSize: `${titleSize}px`}}>Title</h2>
        <p style={{color: "blue", fontSize: "20px"}}>Hey nihao</p>
      </div>
    )
  }
}

export default App

内联样式 ​

内联样式