react使用css module無(wú)法重寫(xiě)bootstrap樣式問(wèn)題及解決

更新時(shí)間：2023年11月14日 14:39:47 作者：kingtopest

這篇文章主要介紹了react使用css module無(wú)法重寫(xiě)bootstrap樣式問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

使用css module無(wú)法重寫(xiě)bootstrap樣式問(wèn)題

react使用css module雖然能夠解決樣式污染，但是同時(shí)也失去了寫(xiě)css樣式的靈活性，特別是：

在.module.css文件中當(dāng)子元素是非變量的靜態(tài)class類(lèi)（比如bootstrap）, 此時(shí)使用css選擇器對(duì)該子元素的樣式不會(huì)起作用的

比如下面這樣：

// xx組件.module.css
.className變量     .bootstrap類(lèi)名（比如：Button）      {
 font-size:　20px
}

此時(shí)這個(gè)樣式是沒(méi)法生效的！

解決辦法

第一步：安裝sass-loader, style-loader, node-sass

這里需要注意node-sass跟node版本的對(duì)應(yīng)關(guān)系：node-sass - npm

react-app/react-eject創(chuàng)建的項(xiàng)目，在安裝node-sass時(shí)可能存在依賴(lài)沖突，可能無(wú)法安裝較新版本的node-sass, 此時(shí)有兩種選擇：

a. 降低node-sass的安裝版本
b. 安裝Dart-sass, Dart Sass 是 Sass 的現(xiàn)代實(shí)現(xiàn)，被廣泛用于前端開(kāi)發(fā)中，特別是在構(gòu)建和維護(hù)復(fù)雜的樣式表時(shí)，它可以提高效率和可維護(hù)性, 并且擁有更好的兼容性。

 yarn add -D sass

第二步、在webpack.config.js配置.scss文件的匹配規(guī)則：

在webpack.config.js文件的module.rules部分增加以下配置：

module:  {
  rules:  [
    ...
             { test: /\.scss$/, // 匹配SCSS文件
                    use: [
                   "style-loader",// 將樣式插入到HTML中
                    "css-loader",  // 解析CSS
                    "sass-loader" // 編譯SCSS
                  ],      
             },
           ]
   }

react-app/react-eject創(chuàng)建的項(xiàng)目, 不需要做配置，因?yàn)橐褍?nèi)置sass支持：

第三步：講css module的后綴從.module.css改成.module.scss, 并使用:global關(guān)鍵字將bootstrap樣式用{}包裹起來(lái)：

.formFont { //  通過(guò)sass解決css模塊選擇子元素的問(wèn)題
  :global { // :global關(guān)鍵字必須要有，否則子元素樣式不會(huì)生效
    .control-label {
        font-size: 20px;
      }
  }
}

:global關(guān)鍵字的作用：

被:global修飾的類(lèi)名，比如， :global(.myClass)，它不會(huì)被sass編譯為哈希字符串，而會(huì)保留原始類(lèi)名 "myClass"，這樣就能在css模塊的環(huán)境下使用全局樣式（比如bootstrap這種）。

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

React并發(fā)更新與性能優(yōu)化解析
這篇文章主要為大家介紹了React并發(fā)更新與性能優(yōu)化解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05
React中Ref的作用小結(jié)
本文文章介紹了React中的Ref概念,包括其基礎(chǔ)概念、使用方式,并討論了在React中通過(guò)Ref操作DOM值時(shí)避免組件不更新的問(wèn)題,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2024-11-11
React.memo 和 useMemo 的使用問(wèn)題小結(jié)
隨著代碼的增加，每次的狀態(tài)改變，頁(yè)面進(jìn)行一次 reRender ，這將產(chǎn)生很多不必要的 reRender 不僅浪費(fèi)性能，從而導(dǎo)致頁(yè)面卡頓，這篇文章主要介紹了React.memo 和 useMemo 的使用問(wèn)題小結(jié),需要的朋友可以參考下
2022-11-11
一篇文章帶你理解React Props的原理
這篇文章主要為大家介紹了ReactProps的原理，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2022-01-01
React使用TypeScript的最佳實(shí)踐和技巧
在React項(xiàng)目中使用TypeScript可以顯著提高代碼的可維護(hù)性和可讀性,并提供強(qiáng)大的類(lèi)型檢查功能,減少運(yùn)行時(shí)錯(cuò)誤,以下是一些優(yōu)雅地將TypeScript集成到React項(xiàng)目中的最佳實(shí)踐和技巧,需要的朋友可以參考下
2024-06-06
在?React?中如何從狀態(tài)數(shù)組中刪除一個(gè)元素
這篇文章主要介紹了在?React?中從狀態(tài)數(shù)組中刪除一個(gè)元素,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-03-03
React Native中ScrollView組件輪播圖與ListView渲染列表組件用法實(shí)例分析
這篇文章主要介紹了React Native中ScrollView組件輪播圖與ListView渲染列表組件用法,結(jié)合實(shí)例形式詳細(xì)分析了ScrollView組件輪播圖與ListView渲染列表組件具體功能、使用方法與操作注意事項(xiàng),需要的朋友可以參考下
2020-01-01
React-Native之TextInput組件的設(shè)置以及如何獲取輸入框的內(nèi)容
這篇文章主要介紹了React-Native之TextInput組件的設(shè)置以及如何獲取輸入框的內(nèi)容問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-05-05
React內(nèi)部實(shí)現(xiàn)cache方法示例詳解
這篇文章主要為大家介紹了React內(nèi)部實(shí)現(xiàn)cache方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-11-11
詳解一個(gè)基于react+webpack的多頁(yè)面應(yīng)用配置
這篇文章主要介紹了詳解一個(gè)基于react+webpack的多頁(yè)面應(yīng)用配置，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-01-01