react可以引入css嗎？

react可以引入css，方法：1、直接在元件內部使用「style={{css樣式}}」來引入css；2、render函數中先宣告一個變數儲存樣式表綁定給style屬性，然後引用；3、使用「import 'css路徑'」引入css檔。

本教學操作環境：windows7系統、react16版，此方法適用於所有品牌電腦。

推薦學習：《程式設計影片》

在React中是可以引入css的。但，如果直接按下面的方式寫內聯樣式會直接報錯，因為JSX語法不支援。

<div style="color:red">测试数据</div> //报错

React支援以下三種寫入css的方法：【相關教學建議：React影片教學】

1、行內樣式：直接在元件內部定義

...
<div style={{
    width:&#39;200px&#39;,
    height:&#39;80px&#39;,
    backgroundColor:&#39;yellow&#39;,    　　　　
    fontSize:&#39;24px&#39;,    　　　　
    textAlign:&#39;center&#39;   　　　　
}}>测试数据</div>
...

2、宣告樣式：在render函數中先聲明，再引用

聲明樣式和行內樣式類似，差異只是宣告一個變數儲存樣式表綁定給style屬性。

render() {
    let mystyle = {
         width:'200px',
		 height:'80px',
		 backgroundColor:'yellow',    　　　　
		 fontSize:'24px',    　　　　
		 textAlign:'center'   　
    }
    return(
        <div style={mystyle}>
            测试数据
        </div>
    );
}

3、使用import引入外部的css樣式檔案

#一個React元件一般就是一個資料夾，資料夾裡包含對應的js和css，只要在js中引入同等級的css即可。

import './mystyle.css';

想要查閱更多相關文章，請造訪PHP中文網！ ！

以上是react可以引入css嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！