react使用css module无法重写bootstrap样式问题及解决

更新时间：2023年11月14日 14:39:47 作者：kingtopest

这篇文章主要介绍了react使用css module无法重写bootstrap样式问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

使用css module无法重写bootstrap样式问题

react使用css module虽然能够解决样式污染，但是同时也失去了写css样式的灵活性，特别是：

在.module.css文件中当子元素是非变量的静态class类（比如bootstrap）, 此时使用css选择器对该子元素的样式不会起作用的

比如下面这样：

// xx组件.module.css
.className变量     .bootstrap类名（比如：Button）      {
 font-size:　20px
}

此时这个样式是没法生效的！

解决办法

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

这里需要注意node-sass跟node版本的对应关系：node-sass - npm

react-app/react-eject创建的项目，在安装node-sass时可能存在依赖冲突，可能无法安装较新版本的node-sass, 此时有两种选择：

a. 降低node-sass的安装版本
b. 安装Dart-sass, Dart Sass 是 Sass 的现代实现，被广泛用于前端开发中，特别是在构建和维护复杂的样式表时，它可以提高效率和可维护性, 并且拥有更好的兼容性。

 yarn add -D sass

第二步、在webpack.config.js配置.scss文件的匹配规则：

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

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

react-app/react-eject创建的项目, 不需要做配置，因为已内置sass支持：

第三步：讲css module的后缀从.module.css改成.module.scss, 并使用:global关键字将bootstrap样式用{}包裹起来：

.formFont { //  通过sass解决css模块选择子元素的问题
  :global { // :global关键字必须要有，否则子元素样式不会生效
    .control-label {
        font-size: 20px;
      }
  }
}

:global关键字的作用：

被:global修饰的类名，比如， :global(.myClass)，它不会被sass编译为哈希字符串，而会保留原始类名 "myClass"，这样就能在css模块的环境下使用全局样式（比如bootstrap这种）。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

React并发更新与性能优化解析
这篇文章主要为大家介绍了React并发更新与性能优化解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05
React中Ref的作用小结
本文文章介绍了React中的Ref概念,包括其基础概念、使用方式,并讨论了在React中通过Ref操作DOM值时避免组件不更新的问题,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧
2024-11-11
React.memo 和 useMemo 的使用问题小结
随着代码的增加，每次的状态改变，页面进行一次 reRender ，这将产生很多不必要的 reRender 不仅浪费性能，从而导致页面卡顿，这篇文章主要介绍了React.memo 和 useMemo 的使用问题小结,需要的朋友可以参考下
2022-11-11
一篇文章带你理解React Props的原理
这篇文章主要为大家介绍了ReactProps的原理，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-01-01
React使用TypeScript的最佳实践和技巧
在React项目中使用TypeScript可以显著提高代码的可维护性和可读性,并提供强大的类型检查功能,减少运行时错误,以下是一些优雅地将TypeScript集成到React项目中的最佳实践和技巧,需要的朋友可以参考下
2024-06-06
在 React 中如何从状态数组中删除一个元素
这篇文章主要介绍了在 React 中从状态数组中删除一个元素,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-03-03
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
这篇文章主要介绍了React Native中ScrollView组件轮播图与ListView渲染列表组件用法,结合实例形式详细分析了ScrollView组件轮播图与ListView渲染列表组件具体功能、使用方法与操作注意事项,需要的朋友可以参考下
2020-01-01
React-Native之TextInput组件的设置以及如何获取输入框的内容
这篇文章主要介绍了React-Native之TextInput组件的设置以及如何获取输入框的内容问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
React内部实现cache方法示例详解
这篇文章主要为大家介绍了React内部实现cache方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
详解一个基于react+webpack的多页面应用配置
这篇文章主要介绍了详解一个基于react+webpack的多页面应用配置，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-01-01