引入方法有: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:'200px', height:'80px', backgroundColor:'yellow', fontSize:'24px', textAlign:'center' }}>测试数据</div> ...
2.宣告樣式
#宣告樣式和行內樣式類似,差異只是宣告一個變數儲存樣式表綁定給style屬性。
... <div style={{ width:'200px', height:'80px', backgroundColor:'yellow', fontSize:'24px', textAlign:'center' }}>测试数据</div> ...
3.import引入
一個React元件一般就是一個資料夾,資料夾裡包含對應的js和css,只要在js中引入同級的css即可。
import './mystyle.css';
推薦學習:css影片教學
#以上是react如何引入css的詳細內容。更多資訊請關注PHP中文網其他相關文章!