react中如何使用局部樣式
更新時(shí)間：2023年10月20日 15:33:31 作者：尼古拉斯二嘎
這篇文章主要介紹了react中如何使用局部樣式問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
react使用局部樣式
在vue里我們可以用scoped輕松編寫局部樣式，但是react并沒有提供這個(gè)關(guān)鍵字，怎么辦呢？
請(qǐng)往下看：
這種方法必須使用類選擇器
1.將scss或者css等文件命名為xxx.module.scss（當(dāng)然css、less、sass也是沒問題的，改為對(duì)應(yīng)后綴名就可以）
2.以前我們都是import ‘xxx.scss’ ，需要改為 import styles(這個(gè)styles名稱自己定義) from ‘xxx.scss’
3.如果我們的類選擇器叫做’.container’，全局的樣式我們這樣寫className=“container”
想要局部樣式這樣寫：className={styles.container}
特別提示一下，局部樣式的類名后會(huì)自動(dòng)追加一堆字符串
react局部樣式和其他小問題
//修改對(duì)象屬性名字，前面是被修改的屬性名字，后面是修改后的屬性名 JSON.parse(JSON.stringify(item).replace(/_id/g, "key"))
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
React ant 點(diǎn)擊導(dǎo)航條閃爍問題解決
很多小伙伴反饋React ant 點(diǎn)擊導(dǎo)航條閃爍,沒有傳遞具體的參數(shù)給點(diǎn)擊事件 , 導(dǎo)致在函數(shù)內(nèi)部無法準(zhǔn)確判斷要展示哪個(gè)子菜單,可能導(dǎo)致頁面狀態(tài)的短暫變化,出現(xiàn)閃爍效果,下面給大家分享解決方法,感興趣的的朋友跟隨小編一起看看吧2024-04-04
本文主要介紹了React中井字棋游戲的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
本文主要介紹了移動(dòng)端點(diǎn)擊事件的300ms延遲問題,并詳細(xì)的介紹了三種解決方法,具有一定的參考價(jià)值,感興趣的可以了解一下2025-03-03
本文給大家分享React鼠標(biāo)多選功能，通過導(dǎo)入組件直接包裹已經(jīng)設(shè)計(jì)好的列表即可，操作簡(jiǎn)單方便,對(duì)React鼠標(biāo)多選相關(guān)知識(shí)感興趣的朋友一起看看吧2021-05-05
React Js 微信禁止復(fù)制鏈接分享禁止隱藏右上角菜單功能
這篇文章主要介紹了React Js 微信禁止復(fù)制鏈接，分享，禁止隱藏右上角菜單的解決代碼,需要的朋友可以參考下2017-05-05
基于webpack4搭建的react項(xiàng)目框架的方法
本篇文章主要介紹了基于webpack4搭建的react項(xiàng)目框架的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
React Native 中實(shí)現(xiàn)確認(rèn)碼組件示例詳解
這篇文章主要為大家介紹了React Native中實(shí)現(xiàn)確認(rèn)碼組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要為大家詳細(xì)介紹了React實(shí)現(xiàn)分頁效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
react-routerV6版本和V5版本的詳細(xì)對(duì)比
React-Router5是React-Router6的前一個(gè)版本,它已經(jīng)被React-Router6取代,React-Router 6是一次較大的重大更新,本文就來介紹一下react-routerV6版本和V5版本的詳細(xì)對(duì)比,感興趣的可以了解一下2023-12-12
詳解如何使用React和MUI創(chuàng)建多選Checkbox樹組件
這篇文章主要為大家詳細(xì)介紹了如何使用 React 和 MUI（Material-UI）庫來創(chuàng)建一個(gè)多選 Checkbox 樹組件,該組件可以用于展示樹形結(jié)構(gòu)的數(shù)據(jù),并允許用戶選擇多個(gè)節(jié)點(diǎn),感興趣的可以了解下2024-01-01