当前位置: 首页 > news >正文

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

相关文章:

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

react使用css module虽然能够解决样式污染,但是同时也失去了写css样式的灵活性,特别是:在.module.css文件中当子元素是非变量的静态class类(比如bootstrap), 此时使用css选择器对该子元素的样式不会起作用的 比如下面…...

自动驾驶软件和人工智能

自动驾驶汽车的核心在于其软件系统,而其中的机器学习和深度学习技术是使车辆能够感知、理解、决策和行动的关键。本文将深入探讨这些技术在自动驾驶中的应用,包括感知、定位、路径规划以及道路标志和交通信号的识别。 1. 机器学习和深度学习在自动驾驶中…...

堆叠、集群技术

1.堆叠、集群技术的概述 堆叠、集群简介 堆叠(iStack),将多台支持堆叠特性的交换机通过堆叠线缆连接在一起,从逻辑上虚拟成一台交换设备,作为一个整体参与数据转发。 集群(Cluster Switch System&#xf…...

SpringCould微服务保护01——Sentinel组件下载并使用

1.初识Sentinel 1.1.雪崩问题及解决方案 1.1.1.雪崩问题 微服务中,服务间调用关系错综复杂,一个微服务往往依赖于多个其它微服务。 如图,如果服务提供者I发生了故障,当前的应用的部分业务因为依赖于服务I,因此也会被…...

可扩展性对物联网管理系统有哪些影响?

可扩展性对于物联网管理系统的设计和开发非常重要,它直接影响着系统的性能、可靠性和能耗等方面,是评估一个系统优劣的重要因素之一。可扩展性对物联网管理系统的影响主要体现在以下几个方面: 设备兼容性:物联网管理系统的可扩展性…...

洗地机哪个品牌最耐用质量好?2023年最好用的洗地机

随着科技的发展,人们的生活越来越便利,就拿打扫卫生来说,现在越来越多人抛弃扫把、地拖,转而选择让清洁更加轻松的清洁家电,而洗地机就是这样一种让打扫卫生变得简单轻松的家电。近年来洗地机销量剧增,是目…...

计算机视觉(Computer Vision, CV)是什么?

什么是计算机视觉 近年来,计算机视觉 (Computer Vision,简称CV) 不断普及,已成为人工智能 (AI) 增长最快的领域之一。计算机视觉致力于使计算机能够识别和理解图像和视频中的物体和人。 计算机视觉应用程序使用来自传感设备、人工智能、机器…...

【【萌新的SOC学习之自定义IP核 AXI4接口】】

萌新的SOC学习之自定义IP核 AXI4接口 自定义IP核-AXI4接口 AXI接口时序 对于一个读数据信号 AXI突发读 不要忘记 最后还有拉高RLAST 表示信号的中止 实验任务 : 通过自定义一个AXI4接口的IP核 ,通过AXI_HP接口对PS端 DDR3 进行读写测试 。 S_AXI…...

设计模式-创建型模式

文章目录 一、单例模式1.饿汉式(1) 静态变量(2) 静态代码块(3) 枚举方式 2.懒汉式(1) 双检锁(2) 静态内部类 3.破坏单例模式(1) 序列化(2) 反射 4.解决单例模式被破坏(1) 序列化、反序列化破坏单例模式的解决方法(2) 反射破坏单例解决 二、工厂方法模式1.简单工厂模式2.工厂方法…...

golang中的RSA算法,加密解密,签名校验,导出公钥密钥,导入公钥密钥

RSA算法广泛应用与数据加密(比如 SSL 传输层加密),数字签名(比如支付宝的支付签名)。 1、加密解密 // encrypts the given message with RSA-OAEP func f1() {// random 用来生成随机的素数rsaPriviteKey, err : rsa…...

修炼k8s+flink+hdfs+dlink(四:k8s(二)组件)

一:控制平面组件。 控制平面组件会为集群做出全局决策,比如资源的调度。 以及检测和响应集群事件,例如当不满足部署的 replicas 字段时, 要启动新的 pod)。 1. kube-apiserver。 该组件负责公开了 Kubernetes API&a…...

Android约束布局ConstraintLayout流式Flow

Android约束布局ConstraintLayout流式Flow <?xml version"1.0" encoding"utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android"http://schemas.android.com/apk/res/android"xmlns:app"http://schemas.…...

Android JNI代码语法解释

文章目录 JNI中的JNIEXPORT、JNIIMPORT和JNICALLJVM如何查找native方法①按照JNI规范的命名规则②调用JNI提供的RegsterNatives函数&#xff0c;将本地函数注册到JVM中示例代码 JNI数据类型JNI字符串的处理①获取字符串②释放字符串③创建字符串④其他字符串处理API JNI中的JNI…...

小程序和前台开发软件定制的相关信息|APP网站搭建

小程序和前台开发软件定制的相关信息 在如今数字化时代&#xff0c;软件、小程序和前台开发软件定制已经成为了企业必备的工具之一。那么&#xff0c;这些工具到底有什么作用呢&#xff1f;接下来&#xff0c;我将为大家详细介绍。 首先&#xff0c;让我们来了解一下软件。软件…...

JVM监控及诊断工具-GUI篇

文章目录 JVM监控及诊断工具-GUI篇工具概述JConsoleVisual VM再谈内存泄漏Java中内存泄漏的8种情况Arthas&#xff08;阿尔萨斯&#xff09;康师傅使用阿尔萨斯的例子help指令 JVM监控及诊断工具-GUI篇 工具概述 使用上一章命令行工具或组合能获取目标Java应用性能相关的基础…...

【C++STL基础入门】list基本使用

文章目录 前言一、list简介1.1 list是什么1.2 list的头文件 二、list2.1 定义对象2.2 list构造函数2.3 list的属性函数 总结 前言 STL&#xff08;Standard Template Library&#xff09;是C标准库的一个重要组成部分&#xff0c;提供了一套丰富的数据结构和算法&#xff0c;可…...

WSL+vscode配置miniob环境

1.配置WSL Windows Subsystem for Linux入门&#xff1a;安装配置图形界面中文环境vscode wu-kan 2.获取源码 找个位置Git Bash然后拉取代码 git clone https://github.com/oceanbase/miniob.git 3.安装相关依赖 https://gitee.com/liangcha-xyy/source/blob/master/how…...

Flutter SliverAppBar 吸顶效果

吸顶是常见的布局&#xff0c;主要使用的是CustomScrollView 和SliverApp组件实现的 页面布局 overrideWidget build(BuildContext context) {return CustomScrollView(controller: controller.scrollController!,physics: const BouncingScrollPhysics(),slivers: [SliverApp…...

Java Spring Boot 自动装配:简化配置和提高开发效率

Spring Boot 自动装配是 Spring Boot 提供的一种特性&#xff0c;它可以根据应用程序的依赖关系和配置信息&#xff0c;自动配置应用程序的各种组件和功能。这样&#xff0c;开发者可以将更多的精力放在业务逻辑的实现上&#xff0c;而不需要手动配置和管理各种组件。 1. 自动…...

对象转换之modelmapper

1. 官网地址&#xff1a;http://modelmapper.org 源码地址&#xff1a;GitHub - modelmapper/modelmapper: Intelligent object mapping 2.实现原理&#xff1a; 主要是基于匹配策略进行属性的转化&#xff0c;目前支持三种策略&#xff1a; 2.1 Standard&#xff08;默认标准…...

网络编程(Modbus进阶)

思维导图 Modbus RTU&#xff08;先学一点理论&#xff09; 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议&#xff0c;由 Modicon 公司&#xff08;现施耐德电气&#xff09;于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现&#xff08;两者等价&#xff09;&#xff0c;用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例&#xff1a; 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

多种风格导航菜单 HTML 实现(附源码)

下面我将为您展示 6 种不同风格的导航菜单实现&#xff0c;每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

深度学习习题2

1.如果增加神经网络的宽度&#xff0c;精确度会增加到一个特定阈值后&#xff0c;便开始降低。造成这一现象的可能原因是什么&#xff1f; A、即使增加卷积核的数量&#xff0c;只有少部分的核会被用作预测 B、当卷积核数量增加时&#xff0c;神经网络的预测能力会降低 C、当卷…...

中医有效性探讨

文章目录 西医是如何发展到以生物化学为药理基础的现代医学&#xff1f;传统医学奠基期&#xff08;远古 - 17 世纪&#xff09;近代医学转型期&#xff08;17 世纪 - 19 世纪末&#xff09;​现代医学成熟期&#xff08;20世纪至今&#xff09; 中医的源远流长和一脉相承远古至…...

让回归模型不再被异常值“带跑偏“,MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中&#xff0c;损失函数的选择对模型性能具有决定性影响。均方误差&#xff08;MSE&#xff09;作为经典的损失函数&#xff0c;在处理干净数据时表现优异&#xff0c;但在面对包含异常值的噪声数据时&#xff0c;其对大误差的二次惩罚机制往往导致模型参数…...