css modules的用法和在react项目中的应用
参考文章
CSS Modules 的用法
CSS Modules 的功能很单纯,只加入了局部作用域和模块依赖,可以保证某个组件的样式,不会影响到其他组件。
局部作用域
CSS的规则都是全局的,任何一个组件的样式规则,都对整个页面有效。
产生局部作用域的唯一方法,就是使用一个唯一的 class 的名字,不会与其他选择器重名。这就是 CSS Modules 的做法。
示例代码:
// index.tsx
import React from 'react';
import styles from './index.less'const Create: React.FC = () => {return <><div className={styles.titleName)></div></>
}
上面代码中,将样式文件 index.less 输入到 style 对象,然后引用 style.titleName 代表一个 class 。
.titleName {height: 18px;line-height: 18px;border-left: 4px solid #4461eb;font-size: 14px;padding-left: 8px;margin-left: 16px;
}
构建工具会将类名 style.titleName 编译成一个哈希字符串。
<div class="titleName___ua3pe">标题
</div>
index.less 也会同时被编译。
.titleName___ua3pe {height: 18px;line-height: 18px;border-left: 4px solid #4461eb;font-size: 14px;padding-left: 8px;margin-left: 16px;
}
这样一来,这个类名就变成唯一的了,只对 Create 组件有效。
CSS Modules 提供各种插件,支持不同的构建工具。上面使用的是 Webpack 的css-loader插件,因为它对 CSS Modules 的支持最好,而且很容易使用。
下面是这个示例的 webpack.config.js 。
module.exports = {entry: __dirname + '/index.js',output: {publicPath: '/',filename: './bundle.js'},module: {loaders: [{test: /\.jsx?$/,exclude: /node_modules/,loader: 'babel',query: {presets: ['es2015', 'stage-0', 'react']}},{test: /\.css$/,loader: "style-loader!css-loader?modules"},]}
};
上面代码中,关键的一行是style-loader!css-loader?modules,它在css-loader后面加了一个查询参数modules,表示打开 CSS Modules 功能。
全局作用域
CSS Modules 允许使用:global(.className)的语法,声明一个全局规则。凡是这样声明的class,都不会被编译成哈希字符串。
使用 css modules 的方式引入的 less 文件,如果需要复写 antd 组件样式,需要加上全局标识:
:global {.ant-upload-select {margin-left: -12px;}.ant-upload-list {position: absolute;width: 80%;left: 24px;top: 0px}
}
相关文章:
css modules的用法和在react项目中的应用
参考文章 CSS Modules 的用法 CSS Modules 的功能很单纯,只加入了局部作用域和模块依赖,可以保证某个组件的样式,不会影响到其他组件。 局部作用域 CSS的规则都是全局的,任何一个组件的样式规则,都对整个页面有效。…...
【LangChain概念】了解语言链️:第2部分
一、说明 在LangChain的帮助下创建LLM应用程序可以帮助我们轻松地链接所有内容。LangChain 是一个创新的框架,它正在彻底改变我们开发由语言模型驱动的应用程序的方式。通过结合先进的原则,LangChain正在重新定义通过传统API可以实现的极限。 在上一篇博…...
步入React前厅 - Css In React
目录 扩展学习资料 行内样式 引入样式表 CSS Module /src/components/common.module.css /src/components/listitem.module.css css管理进阶 Css管理工具 练习 扩展学习资料 资料名称 链接 css module CSS Modules 用法教程 - 阮一峰的网络日志 在React中使…...
OpenCV(三)——图像分割(二)
目录 4.边缘检测 4.1 图像梯度的概念 4.2 模板卷积和梯度图的概念 4.3 梯度算子...
28.Netty源码之缓存一致性协议
Mpsc Queue 基础知识 Mpsc 的全称是 Multi Producer Single Consumer,多生产者单消费者。Mpsc Queue 可以保证多个生产者同时访问队列是线程安全的,而且同一时刻只允许一个消费者从队列中读取数据。 Netty Reactor 线程中任务队列 taskQueue 必须满足多个…...
造个轮子-任务调度执行小框架-任务清单执行恢复实现
文章目录 前言恢复执行流程失败任务执行重启执行中任务恢复执行修复组件整合组件整合容器启动类总结前言 okey,通过前面的两篇文章,关于这个任务执行这一块,我想应该是明白了。但是这里的话,还是不够的。我们希望对于任务还可以做到执行失败的重试执行,关于这个意外宕机的…...
若依部署前后端
打包项目 前端打包 npm run build:prod将代码上传到指定目录 配置nginx转发 server{listen 8090;server_name localhost;location / {root /home/cc_library/dist;index index.html index.htm;# 配置 history模式,刷新页面会404,,因为服…...
2009年上半年 软件设计师 下午试卷
博主介绍:✌全网粉丝3W,全栈开发工程师,从事多年软件开发,在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战,博主也曾写过优秀论文,查重率极低,在这方面有丰富的经验…...
SpringBoot使用自定义事件监听器的demo
记录一下SpringBoot自定义事件监听器的使用方法 案例源码:SpringBoot使用自定义事件监听器的demo 使用的SpringBoot2.0.x版本 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><…...
arcgis定义投影与投影
1、定义 地理坐标系(GCS):利用地球表面的经纬度表示的坐标系统。一般单位为度。投影坐标系(PCS):利用数学换算将三维地球表面上的经纬度坐标转换到二维平面上的坐标系统。一般单位为米。可以认为ÿ…...
Flink多流处理之Broadcast(广播变量)
写过Spark批处理的应该都知道,有一个广播变量broadcast这样的一个算子,可以优化我们计算的过程,有效的提高效率;同样在Flink中也有broadcast,简单来说和Spark中的类似,但是有所区别,首先Spark中的broadcast是静态的数据,而Flink中的broadcast是动态的,也就是源源不断的数据流.在…...
LVS/DR+Keepalived负载均衡实战(一)
引言 负载均衡这个概念对于一个IT老鸟来说再也熟悉不过了,当听到此概念的第一反应是想到举世闻名的nginx,但殊不知还有一个大名鼎鼎的负载均衡方案可能被忽略了,因为对于一般系统来说,很多应用场合中采用nginx基本已经满足需求&a…...
测试DWPose的onnx +Unity barracuda
环境: Unity Barracuda 3.0.1 从github直接拉取的barracuda仓库才能装到这个版本Barracuda以后不再升级了,会迁移到Unity AI大计划里的Sentis 我想申请的来着但好像已经不开放了 Unity 2021.3.20模型:dw-ll_ucoco_384.onnx 报了一些错&…...
轻装上阵,不调用jar包,用C#写SM4加密算法【卸载IKVM 】
前言 记得之前写了一个文章,是关于java和c#加密不一致导致需要使用ikvm的方式来进行数据加密,主要是ikvm把打包后的jar包打成dll包,然后Nuget引入ikvm,从而实现算法的统一,这几天闲来无事,网上找了一下加密…...
redis学习笔记(一)
文章目录 一、引言二、redis介绍2.1、定义2.2、Redis的数据类型及主要特性2.3、Redis的应用场景有哪些? 三、redis环境安装3.1、下载和安装 一、引言 在Web应用发展的初期,那时关系型数据库受到了较为广泛的关注和应用,原因是因为那时候Web站…...
最优化问题 - 拉格朗日对偶
primal 原问题 dual 对偶问题 目标函数 约束条件 可行域D 对偶专题 “拉格朗日对偶问题”如何直观理解?“KKT条件” “Slater条件” “凸优化”打包理解——bilibili 王木头 拉格朗日乘子法与对偶问题...
关于ISO27701隐私信息安全管理体系介绍
01 什么是ISO27701 ISO27701是对ISO27001信息安全管理和ISO27002安全控制的隐私扩展,全称《安全技术—扩展ISO27001和ISO27002的隐私信息管理—要求与指南》,是ISO标准委员会以ISO 27001为基准,以ISO27552为蓝本,建立发布的隐私…...
C语言案例 分数列求和-11
题目:有一分数列:2 / 1,3 / 2,5 / 3,8 / 5,13 / 8,21 / 13 …求出这个数列的前20项之和。 程序分析 这是一个典型的分数列数学逻辑题,考究这类题目是需要从已知的条件中找到它们的分布规律 我们把前6荐的分子与分母分别排列出来,…...
Git 入门
一、版本控制 1.1 什么是版本控制 版本控制(Revision control)是一种在开发的过程中用于管理我们对文件、目录或工程等内容的修改历史,方便查看更改历史记录,备份以便恢复以前的版本的软件工程技术。简单说就是用于管理多人协同开…...
PAT 1010 Radix
个人学习记录,代码难免不尽人意 Given a pair of positive integers, for example, 6 and 110, can this equation 6 110 be true? The answer is yes, if 6 is a decimal number and 110 is a binary number. Now for any pair of positive integers N 1and N 2…...
量子计算在药物发现中的突破性应用
1. 量子计算在药物发现中的突破性应用在计算机辅助药物设计(CADD)领域,蛋白质水合位点的精准预测一直是个关键挑战。水分子在蛋白质-配体相互作用中扮演着双重角色:它们既能作为"分子胶水"稳定复合物结构,又…...
缠论量化分析终极秘籍:从理论到实战的完整智能化解决方案
缠论量化分析终极秘籍:从理论到实战的完整智能化解决方案 【免费下载链接】Indicator 通达信缠论可视化分析插件 项目地址: https://gitcode.com/gh_mirrors/ind/Indicator 在金融市场的波动中,技术分析工具的质量直接影响着交易决策的精准度。今…...
Dialop:基于状态机的前端对话式应用开发框架实战指南
1. 项目概述:一个被低估的对话式应用开发框架最近在折腾一个需要集成复杂对话逻辑的Web应用,从简单的客服机器人到多轮交互的数据收集工具,市面上能找到的框架要么太重,要么太轻,要么就是文档写得云里雾里。就在我准备…...
你不是NPC:在宇宙的数能沙盒里,你拥有最高权限
摘要本文首创提出“数能场”这一概念,挑战了虚拟宇宙论、量子决定论等带来的存在主义焦虑。文章将宇宙比作一个在线共创沙盒游戏,其中“数”代表客观的底层规则(如物理定律),“能”则代表人类的主观意识与创造力。“数…...
QuantDinger 全网最全保姆级教程:5分钟搭建AI量化系统
在这个连菜市场大妈都在讨论股票的时代,你有没有想过一个问题:为什么明明看了那么多研报,学了那么多战法,一到实操还是变成“韭菜”? 说白了,人的大脑在处理海量数据、克服贪婪与恐惧时,是有天…...
多芯片加速器动态LLM推理优化与Compass框架实践
1. 多芯片加速器与动态LLM推理的挑战在当今AI领域,大语言模型(LLM)已经成为自然语言处理任务的核心驱动力。然而,这些模型的庞大规模带来了前所未有的计算挑战。单个芯片的处理能力已经难以满足LLM推理的实时性要求,这使得多芯片加速器架构成…...
[具身智能-446]:灰度图片是如何存储的?
灰度图片的存储方式非常直观,它本质上就是一个由数字组成的二维矩阵。与彩色图片(如 RGB)需要同时记录红、绿、蓝三个通道的数据不同,灰度图只需要记录亮度(Intensity)。你可以把它想象成一张填满了数字的表…...
知识库上线后检索静默失效:一次从监控盲区到分层治理的RAG故障复盘
背景 / 现象 某电商客服知识库RAG系统上线两周后,运营反馈“很多常见问题答不上来”,但后台日志显示检索服务正常返回结果。进一步排查发现,用户高频问题如“退货流程”“优惠券使用”在知识库中存在对应文档,但模型始终无法正确引…...
Windows VEH异常处理实战:用C++写一个无痕Hook框架(附完整源码)
Windows VEH异常处理框架深度解析:从原理到工程实践 在Windows系统开发领域,异常处理机制一直是构建健壮软件系统的核心技术之一。VEH(Vectored Exception Handling)作为Windows异常处理体系中的重要组成部分,不仅为开…...
从多头到分组:深入浅出图解MQA/GQA,帮你选对模型推理优化方案
从多头到分组:深入浅出图解MQA/GQA,帮你选对模型推理优化方案 当你在深夜调试一个即将上线的对话系统时,突然发现响应延迟突破了业务要求的红线——这种场景下,理解不同注意力机制对推理性能的影响,可能比模型本身的准…...
