## 前言 在之前的前端工程中，建議按照文件類型去區分，不過這樣并不好區分，對于項目的維護并沒有多大好處，好的代碼建議將所有相關的代碼維護在一起。 因此行內樣式是被建議的方式。 ## 語法 語法是將樣式按照對象的格式定義為變量，然后在樣式中直接使用這個樣式對象。 ``` var style = { color:'red', } const Button = () => <button style={style}> Click me !</button> ``` ### 體驗下樣式變量 我們在開發的需求中，有些是希望樣式根據變量動態變化的，如果是使用行內樣式，這部分會非常容易實現。比如根據輸入的字號控制文本框的文字大小。 ``` class Input extends Component { constructor(props){ super(props); this.state = { fontSize:12 } ; this.handleChange = this.handleChange.bind(this); } handleChange({target}){ this.setState({ fontSize:target.value, }) } render(){ return (<input onChange={this.handleChange} style={fontSize:this.state.fontSize}/>) } } ``` ## 局限 - 無法實現動畫特性 如果你希望使用類似的特性，你需要寫好樣式，然后直接控制class。同理，也不適合寫一些媒體查詢的樣式。 - 不方便調試 因為其最終樣式會直接渲染，不方便我們直接調試，也不適合代碼復用。 - 頁面文件會因此過大 過多的行內樣式會導致頁面文件過大，影響性能；也因為這點，可能會導致樣式文件無法被緩存優化。 - 無法針對某些樣式代碼進行復用