React引入css的三種方式小結(jié)
更新時(shí)間：2022年12月02日 09:29:35 作者：叉叉醬
這篇文章主要介紹了React引入css的三種方式小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
React引入css的方法
<div style="color:red">測試數(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' ?
}}>測試數(shù)據(jù)</div>
...2.聲明樣式
聲明樣式和行內(nèi)樣式類似，區(qū)別只是聲明一個(gè)變量保存樣式表綁定給style屬性。
...
<div style={{
? ? width:'200px',
? ? height:'80px',
? ? backgroundColor:'yellow', ? ?
? ? fontSize:'24px', ? ?
? ? textAlign:'center' ?
}}>測試數(shù)據(jù)</div>
...3.import引入
一個(gè)React組件一般就是一個(gè)文件夾，文件夾里包含對(duì)應(yīng)的js和css，只要在js中引入同級(jí)的css即可。
import './mystyle.css';
React中css局部引入
配置Webpack模塊化導(dǎo)入CSS
在新項(xiàng)目創(chuàng)建好時(shí)，使用命令yarn eject，顯示配置文件
打開config/webpack.config.js
在檢測CSS的地方(426行)添加如下
modules: true, getLocalIdent: getCSSModuleLocalIdent,
使用：
import style from './TestCss.css';
<span className={style.one}>hello</span>
<span id={style.two}>world</span>在React項(xiàng)目中使用Sass
安裝node-sass包 yarn add node-sass
創(chuàng)建sass文件(以.scss為后綴名，在內(nèi)部寫css代碼)
.TestSass {
span {
? ? color: red;
? ? }
}引入對(duì)應(yīng)的JS文件或者JSX文件
import 'TestSass.scss'
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
react中路由跳轉(zhuǎn)及傳參的實(shí)現(xiàn)
本文主要介紹了react中路由跳轉(zhuǎn)及傳參的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
react echarts tooltip 區(qū)域新加輸入框編輯保存數(shù)據(jù)功能
這篇文章主要介紹了react echarts tooltip 區(qū)域新加輸入框編輯保存數(shù)據(jù)功能,大概思路是用一個(gè)div包裹echarts, 然后在echarts的同級(jí)新建一個(gè)div用來用來模擬真實(shí)tooltip，通過鼠標(biāo)移入移出事件控制真實(shí)tooltip的顯示與隱藏，需要的朋友可以參考下2023-05-05
本文主要介紹了React 實(shí)現(xiàn)表單組件的示例代碼,支持包括輸入狀態(tài)管理,表單驗(yàn)證,錯(cuò)誤信息展示,表單提交,動(dòng)態(tài)表單元素等功能,具有一定的參考價(jià)值,感興趣的可以了解一下2024-07-07
本文主要介紹了React的相關(guān)知識(shí)，具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
本篇文章主要介紹了react-router4 嵌套路由的使用方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要給大家介紹了在ES6下React組件的寫法，其中包括定義React組件、聲明prop類型與默認(rèn)prop、設(shè)置初始state、自動(dòng)綁定，文中分別給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-05-05
下面小編就為大家?guī)硪黄仙Ｕ刯s-react組件生命周期。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
Snake?Game?使用?ReactJS?項(xiàng)目實(shí)現(xiàn)功能組件并相應(yīng)地管理狀態(tài),開發(fā)的游戲允許用戶使用箭頭鍵控制蛇或觸摸屏幕上顯示的按鈕來收集食物并增長長度,本文給大家詳細(xì)講解了如何使用?React?制作一個(gè)貪吃蛇游戲,需要的朋友可以參考下2023-11-11
這篇文章主要為大家詳細(xì)介紹了React實(shí)現(xiàn)Step組件（步驟條組件）的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
React組件設(shè)計(jì)模式之組合組件應(yīng)用實(shí)例分析
這篇文章主要介紹了React組件設(shè)計(jì)模式之組合組件,結(jié)合實(shí)例形式分析了React組件設(shè)計(jì)模式中組合組件相關(guān)概念、原理、應(yīng)用場景與操作注意事項(xiàng),需要的朋友可以參考下2020-04-04