react中如何使用局部樣式
更新時(shí)間：2023年10月20日 15:33:31 作者：尼古拉斯二嘎
這篇文章主要介紹了react中如何使用局部樣式問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
react使用局部樣式
在vue里我們可以用scoped輕松編寫局部樣式，但是react并沒有提供這個(gè)關(guān)鍵字，怎么辦呢？
請往下看：
這種方法必須使用類選擇器
1.將scss或者css等文件命名為xxx.module.scss（當(dāng)然css、less、sass也是沒問題的，改為對應(yīng)后綴名就可以）
2.以前我們都是import ‘xxx.scss’ ，需要改為 import styles(這個(gè)styles名稱自己定義) from ‘xxx.scss’
3.如果我們的類選擇器叫做’.container’，全局的樣式我們這樣寫className=“container”
想要局部樣式這樣寫：className={styles.container}
特別提示一下，局部樣式的類名后會(huì)自動(dòng)追加一堆字符串
react局部樣式和其他小問題
//修改對象屬性名字，前面是被修改的屬性名字，后面是修改后的屬性名 JSON.parse(JSON.stringify(item).replace(/_id/g, "key"))
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了Component與PureComponent解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
React實(shí)現(xiàn)基于Antd密碼強(qiáng)度校驗(yàn)組件示例詳解
這篇文章主要為大家介紹了React實(shí)現(xiàn)基于Antd密碼強(qiáng)度校驗(yàn)組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
解決React報(bào)錯(cuò)You provided a `checked` prop&n
這篇文章主要為大家介紹了React報(bào)錯(cuò)You provided a `checked` prop to a form field的解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
React?Native實(shí)現(xiàn)Toast輕提示和loading效果
這篇文章主要介紹了React Native實(shí)現(xiàn)Toast輕提示和loading效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了淺談react路由傳參的幾種方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
react hooks使用Echarts圖表中遇到的情況及相關(guān)配置問題
這篇文章主要介紹了react hooks使用Echarts圖表中遇到的情況及相關(guān)配置問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家介紹了React?Native中如何使用自定義的引用路徑詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
react拖拽react-beautiful-dnd一維數(shù)組二維數(shù)組拖拽功能
二維數(shù)組可以拖拽,但是不可以編輯+拖拽,如果想要實(shí)現(xiàn)編輯+拖拽,還是需要轉(zhuǎn)換成一維數(shù)組,本文給大家介紹react拖拽react-beautiful-dnd的相關(guān)知識,感興趣的朋友跟隨小編一起看看吧2024-03-03
React中jquery引用的實(shí)現(xiàn)方法
這篇文章主要介紹了React中jquery引用的實(shí)現(xiàn)方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
React 組件渲染和更新的實(shí)現(xiàn)代碼示例
這篇文章主要介紹了React-組件渲染和更新的實(shí)現(xiàn)代碼示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02