引入方法有:1、行內(nèi)樣式;2、聲明樣式,行內(nèi)樣式類似,區(qū)別只是聲明一個(gè)變量保存樣式表綁定給style屬性;3、import引入,React組件一般是一個(gè)文件夾,文件夾里包含對(duì)應(yīng)的js和css,只要在js中引入同級(jí)的css即可。
本教程操作環(huán)境:windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
<div style="color:red">測(cè)試數(shù)據(jù)</div> //報(bào)錯(cuò)
在React中,如果直接按上面的方式寫內(nèi)聯(lián)樣式會(huì)直接報(bào)錯(cuò),因?yàn)镴SX語法不支持,React支持以下三種寫css的方法:
1.行內(nèi)樣式
... <div style={{ width:'200px', height:'80px', backgroundColor:'yellow', fontSize:'24px', textAlign:'center' }}>測(cè)試數(shù)據(jù)</div> ...
2.聲明樣式
聲明樣式和行內(nèi)樣式類似,區(qū)別只是聲明一個(gè)變量保存樣式表綁定給style屬性。
... <div style={{ width:'200px', height:'80px', backgroundColor:'yellow', fontSize:'24px', textAlign:'center' }}>測(cè)試數(shù)據(jù)</div> ...
3.import引入
一個(gè)React組件一般就是一個(gè)文件夾,文件夾里包含對(duì)應(yīng)的js和css,只要在js中引入同級(jí)的css即可。
import './mystyle.css';
推薦學(xué)習(xí):css視頻教程