React中的CSS局部引入過程
更新時間：2023年03月29日 09:22:05 作者：King_960725
這篇文章主要介紹了React中的CSS局部引入過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
React中CSS局部引入
配置Webpack模塊化導(dǎo)入CSS
在新項(xiàng)目創(chuàng)建好時，使用命令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
1、安裝node-sass包 yarn add node-sass
2、創(chuàng)建sass文件(以.scss為后綴名，在內(nèi)部寫css代碼)
.TestSass {
span {
? ? color: red;
? ? }
}3、引入對應(yīng)的JS文件或者JSX文件
import 'TestSass.scss'
React局部樣式和其他小問題
//修改對象屬性名字，前面是被修改的屬性名字，后面是修改后的屬性名 JSON.parse(JSON.stringify(item).replace(/_id/g, "key"))
總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
ReactNative頁面跳轉(zhuǎn)實(shí)例代碼
這篇文章主要介紹了ReactNative頁面跳轉(zhuǎn)的代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-09-09
下面小編就為大家?guī)硪黄獪\談react.js 之 批量添加與刪除功能。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
React?Hook?Form?優(yōu)雅處理表單使用指南
這篇文章主要為大家介紹了React?Hook?Form?優(yōu)雅處理表單使用指南，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
React框架快速實(shí)現(xiàn)簡易的Markdown編輯器
這篇文章主要為大家介紹了使用React框架實(shí)現(xiàn)簡易的Markdown編輯器，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-04-04
這篇文章主要介紹了react build 后打包發(fā)布總結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家介紹了ahooks整體架構(gòu)及React工具庫的源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
React?Refs?的使用forwardRef?源碼示例解析
這篇文章主要為大家介紹了React?之?Refs?的使用和?forwardRef?的源碼解讀，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
本文主要介紹了react hooks組件間的傳值方式(使用ts)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
React將組件作為參數(shù)進(jìn)行傳遞的3種方法實(shí)例
其實(shí)react組件之間傳遞參數(shù)是比較簡單的,組件傳入?yún)?shù)的一種方式,下面這篇文章主要給大家介紹了關(guān)于React將組件作為參數(shù)進(jìn)行傳遞的3種方法,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
Next.js搭建Monorepo組件庫文檔實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了Next.js搭建Monorepo組件庫文檔，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11