react中css样式隔离

 使用CSS Modules   css模块化
1, 创建组件样式文件时以 xxx.module.css命名, 例如 Home.module.css 代替  Home.css 
2, 在组件jsx导入样式文件时使用 import styles from './xxx.module.css' 导入  代替  import './xxx.css'
3, 在组件中需要设置样式的标签上添加class值, className={styles.yyy}  其中yyy指的是css样式中的class值
4, 在xxx.module.css中通过 .yyy{} 设置样式,即为局部样式

方法一:

1,给对应的css文件,修改为module.css

2,引入样式的时候

方法二:

 根标签选择器限制
如果需要每个组件样式隔离, 在设置组件样式时, 每一个选择器都添加组件根标签选择器, 以区分不同组件中的样式

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

WebGl学习使用attribute变量绘制一个水平移动的点

在WebGL编程中,attribute变量是一种特殊类型的变量,用于从客户端传递数据到顶点着色器。这些数据通常包括顶点的位置、颜色、纹理坐标等,它们是与每个顶点直接相关的信息。attribute变量在顶点着色器中声明,并且对于每个顶点来说都…

Qt-系统线程安全(63)

目录 描述 使用 线程不安全 线程安全 释放锁问题 其他的锁 条件变量和信号量 描述 多线程程序太复杂了 在C/C 和 Linux中,我们为了保证线程安全,简单的方式就是加锁 为此 Qt 也封装了自己的一套锁管理 使用 线程不安全 我们先测验一下线程不安…

【工具】音视频翻译工具基于Whisper+ChatGPT

OpenAI推出的开源语音识别工具Whisper,以其卓越的语音识别能力,在音频和视频文件处理领域大放异彩。与此同时,ChatGPT也在翻译领域崭露头角,其强大的翻译能力备受赞誉。因此,一些字幕制作团队敏锐地捕捉到了这两者的结…

Android中的Activity(案例+代码+效果图)

目录 1.Activity的生命周期 核心生命周期回调 1)onCreate() 2)onStart() 3)onResume() 4)onPause() 5)onStop() 6)onRestart() 7)onDestroy() 8)生命周期图示 10)注意事项…

Golang | Leetcode Golang题解之第468题验证IP地址

题目: 题解: func validIPAddress(queryIP string) string {if sp : strings.Split(queryIP, "."); len(sp) 4 {for _, s : range sp {if len(s) > 1 && s[0] 0 {return "Neither"}if v, err : strconv.Atoi(s); err …

教你把产品图册转为翻页电子书

​在科技飞速发展的今天,产品的宣传方式也在不断创新。为了让产品图册更加吸引眼球,我推出了一款结合动画和音乐的效果惊艳的产品图册。这款产品图册不仅展示了产品的精美外观和独特功能,更通过动态效果和美妙音乐,为观众带来一场…

LabVIEW提高开发效率技巧----点阵图(XY Graph)

在LabVIEW开发中,点阵图(XY Graph) 是一种强大的工具,尤其适用于需要实时展示大量数据的场景。通过使用点阵图,开发人员能够将实时数据可视化,帮助用户更直观地分析数据变化。 1. 点阵图的优势 点阵图&…

【puppeteer】wvp-puppeteer制作 过程

目录 最后的结论 制作windows&ubuntu的docker 重启桌面上的docker 命令重启 通过 Docker Desktop 图形界面重启 制作centos docker 测试 参考文档 最后的结论 ubuntu && windows 使用 dualvenregistry:5000/wvp-puppeteer:1.0 centos7 使用:…

Word 中脚注和尾注的区别有哪些?如何正确使用它们?

在撰写学术论文、报告或其他需要引用资料的文章时,脚注和尾注是两种常用的标注方法。它们不仅可以为读者提供额外的背景信息,还能帮助整理文章中的引用来源。下面我们就来详细的了解一下什么是脚注和尾注。 脚注 脚注(Footnote)…

回溯法与迭代法详解:如何从手机数字键盘生成字母组合

在这篇文章中,我们将详细介绍如何基于手机数字键盘的映射,给定一个仅包含数字 2-9 的字符串,输出它能够表示的所有字母组合。这是一个经典的回溯算法问题,适合初学者理解和掌握。 问题描述 给定一个数字字符串,比如 …

2024 第一次周赛

A: 题目大意 骑士每连续 i 天每天会得到 i 个金币,(i 1, 2, 3 , …),那么展开看每一天可以得到的金币数:1 2 2 3 3 3 4 4 4 5 5 5 5 5 … 可以发现就是1个1 ,2个2, 3个3…,那么我…

关于md5强比较和弱比较绕过的实验

在ctf比赛题中我们的md5强弱比较的绕过题型很多,大部分都是结合了PHP来进行一个考核。这一篇文章我将讲解一下最基础的绕过知识。 MD5弱比较 比较的步骤 在进行弱比较时,PHP会按照以下步骤执行: 确定数据类型:检查参与比较的两…

Django的请求与响应

Django的请求与响应 1、常见的请求2、常见的响应3、案例 1、常见的请求 函数的参数request是一个对象,封装了用户发送过来的所有请求相关数据。 get请求一般用来请求获取数据,get请求也可以传参到后台,但是传递的参数显示在地址栏。 post请求…

vue3 高德地图标注(飞线,呼吸点)效果

装下这两个 npm 忘了具体命令了&#xff0c;百度一下就行 “loca”: “^1.0.1”, “amap/amap-jsapi-loader”: “^1.0.1”, <template><div id"map" style"width: 100%;height: 100%;"></div> </template><script setup> …

论文笔记:RelationPrompt :Zero-Shot Relation Triplet Extraction

论文来源: ACL Findings 2022 论文链接:https://arxiv.org/pdf/2203.09101.pdf 论文代码:http://github.com/declare-lab/RelationPrompt 本篇论文是由阿里达摩院自然语言智能实验室于2022年发表的关于零样本关系抽取的顶会论文,本篇博客将记录我在阅读过程中的一些笔记…

​ceph掉电后无法启动osd,pgs unknown

处理办法&#xff1a; 进一步osd.0的日志检查发现提示unable to read osd superblock&#xff1a; 尝试fsck操作&#xff1a; ceph-objectstore-tool --data-path /var/lib/ceph/osd/ceph-0/ --type bluestore --op fsck 如果成功&#xff0c;则到此为止。 如果失败&#xf…

K8s简介及环境搭建

一、Kubernetes简介 kubernetes 的本质是一组服务器集群&#xff0c;它可以在集群的每个节点上运行特定的程序&#xff0c;来对节点中的容器进行管理。目的是实现资源管理的自动化&#xff0c;主要提供了如下的主要功能&#xff1a; 自我修复&#xff1a;一旦某一个容器崩溃&a…

游戏加速器最新口令兑换码,最低50小时免费领取

不是月卡买不起&#xff0c;而是薅羊毛更有性价比&#xff01;游戏党福音&#xff0c;今天为玩家们分享最新一批雷雷口令兑换码&#xff0c;为您的游戏之旅全面保驾护航&#xff01; 兑换码&#xff1a;8521 兑换码&#xff1a;9989 兑换码&#xff1a;211314 兑换码&#…

springmvc的处理流程

用户把请求发到前端控制器&#xff0c;前端控制器通过handlerMapping找到controller&#xff0c;controller调用service&#xff0c;service调用dao&#xff0c;从数据库拿到要获取的数据&#xff0c;然后modelandview给前端控制器&#xff0c;前端控制器通过viewresolver解析视…

仿IOS桌面悬浮球(支持拖拽、自动吸附、自动改变透明度与点击、兼容PC端与移动端)

使用 pointerdown/pointermove/pointerup 实现仿IOS桌面悬浮球效果&#xff0c;支持拖拽、指定拖拽选对容器&#xff0c;指定拖拽安全区、自动吸附、自动改变透明度与点击&#xff0c;兼容PC端与移动端。 效果展示 https://code.juejin.cn/pen/7423757568268304421 代码实现 …