React中css的使用

網頁的佈局、顏色、形狀等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樣式名不存在同名衝突。