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?Native實(shí)現(xiàn)Toast輕提示和loading效果
這篇文章主要介紹了React Native實(shí)現(xiàn)Toast輕提示和loading效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
使用react-native-doc-viewer實(shí)現(xiàn)文檔預(yù)覽
這篇文章主要介紹了使用react-native-doc-viewer實(shí)現(xiàn)文檔預(yù)覽，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了React中的聲明式渲染框架,我們先討論了命令式和聲明式這兩種范式的差異，其中命令式更加關(guān)注過程，而聲明式更加關(guān)注結(jié)果，對(duì)React渲染框架知識(shí)感興趣的朋友跟隨小編一起看看吧2022-06-06
vite?+?react?+typescript?環(huán)境搭建小白入門教程
這篇文章主要介紹了vite?+?react?+typescript?環(huán)境搭建小白入門教程,本文通過示例圖文相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
React?component.forceUpdate()強(qiáng)制重新渲染方式
這篇文章主要介紹了React?component.forceUpdate()強(qiáng)制重新渲染方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
forwardRef?中React父組件控制子組件的實(shí)現(xiàn)代碼
forwardRef 用于拿到父組件傳入的 ref 屬性，這樣在父組件便能通過 ref 控制子組件，這篇文章主要介紹了forwardRef?-?React父組件控制子組件的實(shí)現(xiàn)代碼,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了react實(shí)現(xiàn)換膚功能的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了React事件機(jī)制源碼解析的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用React框架，感興趣的朋友可以了解下2021-04-04
react-redux的connect與React.forwardRef結(jié)合ref失效的解決
這篇文章主要介紹了react-redux的connect與React.forwardRef結(jié)合ref失效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了淺談在react中如何實(shí)現(xiàn)掃碼槍輸入，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07