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

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 的功能很单纯&#xff0c;只加入了局部作用域和模块依赖&#xff0c;可以保证某个组件的样式&#xff0c;不会影响到其他组件。 局部作用域 CSS的规则都是全局的&#xff0c;任何一个组件的样式规则&#xff0c;都对整个页面有效。…...

【LangChain概念】了解语言链️:第2部分

一、说明 在LangChain的帮助下创建LLM应用程序可以帮助我们轻松地链接所有内容。LangChain 是一个创新的框架&#xff0c;它正在彻底改变我们开发由语言模型驱动的应用程序的方式。通过结合先进的原则&#xff0c;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&#xff0c;多生产者单消费者。Mpsc Queue 可以保证多个生产者同时访问队列是线程安全的&#xff0c;而且同一时刻只允许一个消费者从队列中读取数据。 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模式&#xff0c;刷新页面会404&#xff0c;&#xff0c;因为服…...

2009年上半年 软件设计师 下午试卷

博主介绍&#xff1a;✌全网粉丝3W&#xff0c;全栈开发工程师&#xff0c;从事多年软件开发&#xff0c;在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战&#xff0c;博主也曾写过优秀论文&#xff0c;查重率极低&#xff0c;在这方面有丰富的经验…...

SpringBoot使用自定义事件监听器的demo

记录一下SpringBoot自定义事件监听器的使用方法 案例源码:SpringBoot使用自定义事件监听器的demo 使用的SpringBoot2.0.x版本 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><…...

arcgis定义投影与投影

1、定义 地理坐标系&#xff08;GCS&#xff09;&#xff1a;利用地球表面的经纬度表示的坐标系统。一般单位为度。投影坐标系&#xff08;PCS&#xff09;&#xff1a;利用数学换算将三维地球表面上的经纬度坐标转换到二维平面上的坐标系统。一般单位为米。可以认为&#xff…...

Flink多流处理之Broadcast(广播变量)

写过Spark批处理的应该都知道,有一个广播变量broadcast这样的一个算子,可以优化我们计算的过程,有效的提高效率;同样在Flink中也有broadcast,简单来说和Spark中的类似,但是有所区别,首先Spark中的broadcast是静态的数据,而Flink中的broadcast是动态的,也就是源源不断的数据流.在…...

LVS/DR+Keepalived负载均衡实战(一)

引言 负载均衡这个概念对于一个IT老鸟来说再也熟悉不过了&#xff0c;当听到此概念的第一反应是想到举世闻名的nginx&#xff0c;但殊不知还有一个大名鼎鼎的负载均衡方案可能被忽略了&#xff0c;因为对于一般系统来说&#xff0c;很多应用场合中采用nginx基本已经满足需求&a…...

测试DWPose的onnx +Unity barracuda

环境&#xff1a; Unity Barracuda 3.0.1 从github直接拉取的barracuda仓库才能装到这个版本Barracuda以后不再升级了&#xff0c;会迁移到Unity AI大计划里的Sentis 我想申请的来着但好像已经不开放了 Unity 2021.3.20模型&#xff1a;dw-ll_ucoco_384.onnx 报了一些错&…...

轻装上阵,不调用jar包,用C#写SM4加密算法【卸载IKVM 】

前言 记得之前写了一个文章&#xff0c;是关于java和c#加密不一致导致需要使用ikvm的方式来进行数据加密&#xff0c;主要是ikvm把打包后的jar包打成dll包&#xff0c;然后Nuget引入ikvm&#xff0c;从而实现算法的统一&#xff0c;这几天闲来无事&#xff0c;网上找了一下加密…...

redis学习笔记(一)

文章目录 一、引言二、redis介绍2.1、定义2.2、Redis的数据类型及主要特性2.3、Redis的应用场景有哪些&#xff1f; 三、redis环境安装3.1、下载和安装 一、引言 在Web应用发展的初期&#xff0c;那时关系型数据库受到了较为广泛的关注和应用&#xff0c;原因是因为那时候Web站…...

最优化问题 - 拉格朗日对偶

primal 原问题 dual 对偶问题 目标函数 约束条件 可行域D 对偶专题 “拉格朗日对偶问题”如何直观理解&#xff1f;“KKT条件” “Slater条件” “凸优化”打包理解——bilibili 王木头 拉格朗日乘子法与对偶问题...

关于ISO27701隐私信息安全管理体系介绍

01 什么是ISO27701 ISO27701是对ISO27001信息安全管理和ISO27002安全控制的隐私扩展&#xff0c;全称《安全技术—扩展ISO27001和ISO27002的隐私信息管理—要求与指南》&#xff0c;是ISO标准委员会以ISO 27001为基准&#xff0c;以ISO27552为蓝本&#xff0c;建立发布的隐私…...

C语言案例 分数列求和-11

题目&#xff1a;有一分数列&#xff1a;2 / 1,3 / 2,5 / 3,8 / 5,13 / 8,21 / 13 …求出这个数列的前20项之和。 程序分析 这是一个典型的分数列数学逻辑题&#xff0c;考究这类题目是需要从已知的条件中找到它们的分布规律 我们把前6荐的分子与分母分别排列出来&#xff0c;…...

Git 入门

一、版本控制 1.1 什么是版本控制 版本控制&#xff08;Revision control&#xff09;是一种在开发的过程中用于管理我们对文件、目录或工程等内容的修改历史&#xff0c;方便查看更改历史记录&#xff0c;备份以便恢复以前的版本的软件工程技术。简单说就是用于管理多人协同开…...

PAT 1010 Radix

个人学习记录&#xff0c;代码难免不尽人意 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…...

C++实现分布式网络通信框架RPC(3)--rpc调用端

目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中&#xff0c;我们已经大致实现了rpc服务端的各项功能代…...

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎&#xff08;Physics Engine&#xff09; 物理引擎 是一种通过计算机模拟物理规律&#xff08;如力学、碰撞、重力、流体动力学等&#xff09;的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互&#xff0c;广泛应用于 游戏开发、动画制作、虚…...

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效&#xff0c;它能挖掘数据中的时序信息以及语义信息&#xff0c;但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN&#xff0c;但是…...

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

关键领域软件测试的突围之路:如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...

C++使用 new 来创建动态数组

问题&#xff1a; 不能使用变量定义数组大小 原因&#xff1a; 这是因为数组在内存中是连续存储的&#xff0c;编译器需要在编译阶段就确定数组的大小&#xff0c;以便正确地分配内存空间。如果允许使用变量来定义数组的大小&#xff0c;那么编译器就无法在编译时确定数组的大…...

RabbitMQ入门4.1.0版本(基于java、SpringBoot操作)

RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发&#xff0c;后来由Pivotal Software Inc.&#xff08;现为VMware子公司&#xff09;接管。RabbitMQ 是一个开源的消息代理和队列服务器&#xff0c;用 Erlang 语言编写。广泛应用于各种分布…...

2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师(题目+回答)

安全领域各种资源&#xff0c;学习文档&#xff0c;以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具&#xff0c;欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...