解决react使用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这种)。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/104493.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

什么是API网关?——驱动数字化转型的“隐形冠军”

什么是API网关 API网关(API Gateway)是一个服务器,位于应用程序和后端服务之间,提供了一种集中式的方式来管理API的访问。它是系统的入口点,负责接收并处理来自客户端的请求,然后将请求路由到相应的后端服…

为什么Excel插入图片不显示,点击能够显示

今天在做Excel表格时,发现上传图片后不能显示,但是点击还是能够出现图片的 点击如下 点击能看到,但是不显示?那么只需鼠标右键点击浮动即可显示

CSS 滚动驱动动画 animation-range

animation-range 语法 normallength-percentagetimeline-range-name 具名时间线范围 named timeline rangecovercontainentry 和 entry-crossingexit 和 exit-crossing 兼容性 animation-range 这个属性可同时对 scroll progress timeline 和 view progress timeline 这两种不…

了解华为交换机路由器的基本命令

什么是CLI:使用户与设备交互的界面,用户输入对应的命令,设备会回复我们输入的内容,回车车后设备会执行对应命令,达到管理、配置、查看的目的。 CLI界面分为三种操作视图: 用户试图:设备登陆后…

【java|golang】多字段排序以及排序规则

奖励最顶尖的 K 名学生 给你两个字符串数组 positive_feedback 和 negative_feedback ,分别包含表示正面的和负面的词汇。不会 有单词同时是正面的和负面的。 一开始,每位学生分数为 0 。每个正面的单词会给学生的分数 加 3 分,每个负面的词…

selenium打开火狐浏览器

项目上需求为:甲方OA 系统是IE系统,需要从IE系统点个按钮打开火狐浏览器单点登录跳转到我们的系统 前期解决方案为:打开浏览器就行了,然后就用的是打开本地浏览器,但是由于B/S架构,有别人远程访问我的ip来…

如何使用ChatPPT生成PPT文档

简介 ChatPPT是一个基于人工智能的PPT生成工具,可以帮助用户快速生成高质量的PPT文档。ChatPPT使用自然语言处理技术,可以根据用户的指令生成PPT内容、设计和排版。 使用方法 ChatPPT提供了两种使用方式:在线体验版和Office插件版。 在线…

【博客搭建】1、拾壹博客本地启动遇到的问题和需要注意的坑

一、后端(blog)启动 1、修改application.yml中的数据库链接与密码,Redis账号密码,即可启动成功; 2、运行之前先导入sql; 3、 如需上传文件保存至本地(例如相册的照片),需…

【竞赛题目】木块(C语言详解)

" 木块 " 是【第二届全国高校计算机技能竞赛】里的一道竞赛题目,博主觉得很新颖想推荐给大家; 题目描述 为了提高词汇量,小理得到了一套四块木块,其中每块都是一个立方体,六面各写着一个字母。他正在通过将…

神经网络中卷积和池化的区别

1、什么叫卷积? 卷积层是用一个固定大小的矩形区去席卷原始数据,将原始数据分成一个个和卷积核大小相同的小块,然后将这些小块和卷积核相乘输出一个卷积值(注意这里是一个单独的值,不再是矩阵了)。 卷积的…

YOLOv5算法改进(11)— 主干网络介绍(MobileNetV3、ShuffleNetV2和GhostNet)

前言:Hello大家好,我是小哥谈。主干网络通常指的是深度学习中的主干模型,通常由多个卷积层和池化层组成,用于提取输入数据的特征。在训练过程中,主干网络的参数会被不断优化以提高模型的准确性。YOLOv5算法中的主干网络可以有多种替换方案,为了后面讲解的方便,本篇文章就…

CVE-2017-12615 Tomcat远程命令执行漏洞

漏洞简介 2017年9月19日,Apache Tomcat官方确认并修复了两个高危漏洞,漏洞CVE编号:CVE-2017-12615和CVE-2017-12616,其中 远程代码执行漏洞(CVE-2017-12615) 当 Tomcat 运行在 Windows 主机上,…

加持智慧医疗,美格智能5G数传+智能模组让就医触手可及

智慧医疗将云计算、物联网、大数据、AI等新兴技术融合赋能医疗健康领域,是提高医疗健康服务的资源利用效率,创造高质量健康医疗的新途径。《健康中国2030规划纲要》把医疗健康提升到了国家战略层面,之后《“十四五”全面医疗保障规划》等一系…

时间复杂度O(40n*n)的C++算法:修改图中的边权

本篇源码下载 点击下载 1.12.1. 题目 给你一个 n 个节点的 无向带权连通 图,节点编号为 0 到 n - 1 ,再给你一个整数数组 edges ,其中 edges[i] [ai, bi, wi] 表示节点 ai 和 bi 之间有一条边权为 wi 的边。 部分边的边权为 -1&#xff08…

CANdb++数据库操作

CANdb数据库操作 创建工程结构文件夹新建数据库&总线描述节点设置节点创建配置Message属性信号设置节点收发信号 环境变量配置一致性检验数据库工程XVehicle.dbc导入工程文件总结 创建工程结构文件夹 在文件夹X-Vehicle-1下,建立工程目录文件夹CANdb&#xff0…

CustomNavBar 自定义导航栏视图

1. 创建偏好设置键 CustomNavBarTitlePreferenceKey.swift import Foundation import SwiftUI//State private var showBackButton: Bool true //State private var title: String "Title" //"" //State private var subtitle: String? "SubTitl…

相似性搜索:第 1 部分- kNN 和倒置文件索引

图片来源:维亚切斯拉夫叶菲莫夫 一、说明 SImilarity 搜索是一个问题,给定一个查询的目标是在所有数据库文档中找到与其最相似的文档。 在数据科学中,相似性搜索经常出现在NLP领域,搜索引擎或推荐系统中,其中需要检索最…

C# OpenVINO Cls 图像分类

效果 耗时 class idbrown_bear, score0.86 preprocess time: 0.00ms infer time: 2.72ms postprocess time: 0.02ms Total time: 2.74ms项目 代码 using OpenCvSharp; using Sdcb.OpenVINO; using Sdcb.OpenVINO.Natives; using System; using System.Diagnostics; using Sys…

地产三维实景vr展示的功能及特点

随着科技的不断发展,VR(虚拟现实)技术也越来越成熟。VR技术的广泛应用,已经逐渐渗透到各个领域,其中引人注目的就是虚拟展馆。虚拟展馆是一种利用VR技术构建的线上展示空间,让观众可以在家中就能参观展览,带来了极大地…

模板进阶和反向迭代器

文章目录 模板非类型模板参数模板特化函数模板特化类模板特化 模板分离编译 反向迭代器 模板 非类型模板参数 模板参数分类类型形参与非类型形参。 类型形参即:出现在模板参数列表中,跟在class或者typename之类的参数类型名称。 非类型形参&#xff0c…