react如何引入css

引入方法有：1、行內樣式；2、宣告樣式，行內樣式類似，差異只是宣告一個變數儲存樣式表綁定給style屬性；3、import引入，React元件一般是一個資料夾，資料夾裡包含對應的js和css，只要在js中引入同級的css即可。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

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

在React中，如果直接按上面的方式寫內聯樣式會直接報錯，因為JSX語法不支持，React支持以下三種寫css的方法：

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.宣告樣式

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

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

3.import引入

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

import './mystyle.css';

推薦學習：css影片教學

#

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