網頁的布局、顏色、形狀等UI展示方式主要是由Css進行設置，在ReactJs中也是一樣。ReactJs中的Css結構方式與傳統的Web網頁類似，但依然存在一些差異。ReactJs中Css文件本身的編寫上並沒有差異，我們可以定義特定的樣式類名，也可以正對Html元素定義樣式。差異主要在React對Css的使用上
- 引用的差異：
傳統html文件中css文件引用方式：
<link rel="stylesheet" type="text/css" href="mystyle.css">
ReactJs中css文件引用方式：
你可以直接采用require: require('./Category.css');
你也可以采用import: import styles from './Category.css';
- 使用差異：
傳統css的使用方式是設置class: <div class=”center”> test </div>
ReactJs中css的使用方式是設置className(因為class已經成為了關鍵字)。
<div className='entry'>test </div>
另外
如果你采用require的方式，你可以直接在頁面元素中使用css文件中的樣式名。
如果你采用import styles from './Category.css';的方式，則應采用以下方式。
1.<div className={style.entry}>test </div>
2.<div style={{marginTop:10}}>test </div>
3.import ReactDOM from 'react-dom';
<Button ref="button" />
const button = ReactDOM.findDOMNode(this.refs.button);
button.setAttribute('disabled', 'true');
- 最終解析文件的差異：
傳統css文件一般依然保持着源碼狀態。
在ReactJS中，Css文件最終將會對css樣式名進行轉換，例如在index.js文件中，引用style.css:
.customButton{
}
將轉化為：
.index_customButton_23U0x{
}.
其中23U0x是隨機數，這樣轉化的結果將避免最終的單頁面中，css樣式名不存在同名沖突。