React 开发 | 样式模块化

2023-05-16

1、使用 ES6 实现样式模块化,避免样式冲突
index.module.css

.title {
  background: red;
}

Hello.jsx

import hello from './index.module.css'

export default class Hello extends Component {
	render() {
    return <h2 className={hello.title}>Hello</h2>
  }
}

2、也可以使用 less 嵌套避免样式冲突

.hello {
  .title {
  	background: red;
  }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React 开发 | 样式模块化 的相关文章

随机推荐

  • opencv-python 常用函数介绍

    目录 imread xff1a 读取图片 imshow xff1a 展示图片 resize xff1a 图片等比例缩放 split xff1a 获取所有像素的颜色值 merge xff1a 根据颜色值合成图片 VideoCapture xf
  • redis 内存占用分析

    在Redis命令行中 xff0c 执行MEMORY STATS命令查询内存使用详情 Redis实例的内存开销主要由两部分组成 xff1a 业务数据的内存开销 xff0c 该部分一般作为重点分析对象 非业务数据的内存开销 xff0c 例如主备
  • php laravel 分析 redis 各个key的内存占用情况

    lt php namespace App Console Commands Tools use Illuminate Console Command use Illuminate Support Facades DB class Redis
  • centos7手动修改dns

    DNS是计算机域名系统 Domain Name System 或Domain Name Service 的缩写 xff0c 它是由域名解析器和域名服务器组成的 域名服务器是指保存有该网络中所有主机的域名和对应IP地址 xff0c 并具有将域
  • 查看并关闭占用端口

    查看占用端口 sudo lsof i 8888 关闭占用端口 sudo kill 9 2558243
  • 从水果连连看到两条序列比对

    一 序列比对 Sequence Alignment 序列比对 xff08 sequence alignment xff09 xff0c 目前是生物信息学的基本研究方法 算法类似于连连看 xff0c 规则是上下两个水果一样 xff0c 就可以
  • Nginx 配置详解

    Nginx 配置 文章目录 Nginx 配置文件结构全局配置events 配置http 配置server 配置 Rewrite一 地址重写 xff0c 地址转发 xff0c 重定向二 URL 重写语法 xff1a 使用 xff1a 三 if
  • 趣谈网络协议(一)

    一般来说 xff0c 网上的购物 都是基于应用层的Http协议 那么在这一层协议书我们包装了什么呢 xff0c 请看下图 一 应用层 Http头 http1 1 POST URL 正文格式 content type 长度 content l
  • JS 中 Json 数据的快速排序

    主要方法 span class token comment 升序排列 span span class token keyword function span span class token function up span span cl
  • 生物信息学导师推荐(持续更新)

    本系列会持续更新 xff0c 帮助大家找到更适合自己的导师 xff0c 注意排名不分先后 xff0c 接下来我们开始介绍 xff1a 陈润生 单位 xff1a 中国科学院生物物理研究所 方向 xff1a 长非编码RNA以及编码小肽的系统发现
  • Python 中变量的多种复制方法(常规拷贝,浅拷贝,深拷贝)

    常规拷贝 大家常用的变量复制方法 xff0c 用 61 就行 但是 xff01 但是 xff01 但是 xff01 在我们复制字典和列表时会和我们预想的不一致 接下来 xff0c 做个小实验 常规拷贝在原始变量 x 的改变后 xff0c 因
  • 图解机器学习:分类模型性能评估指标

    人间出现一种怪病 xff0c 患病人群平时正常 xff0c 但偶尔暴饮暴食 xff0c 这种病从外观和现有医学手段无法分辨 为了应对疫情 xff0c 准备派齐天大圣去下界了解情况 事先神官从人间挑选了一些健康人和患病者来对大圣的业务能力进行
  • 数据库涉及大量数据查询时的注意事项

    避免频繁连接和关闭数据库 xff0c 这样会导致IO访问次数太频繁 设计表时要建立适当的索引 xff0c 尤其要在 where 及 order by 涉及的列上建立索引 避免全表扫描 xff0c 以下情况会导致放弃索引直接进行全部扫描 避免
  • axios 使用详解

    一 安装 cnpm install axios 二 使用 三种写法 span class token comment 第一种写法 span axios span class token punctuation span span class
  • 生物序列比对的几种应用场景(图文)

    今天和大家讨论几种序列比对的应用场景 xff0c 当然只是抛转引玉 xff0c 如果小伙伴有其他应用场景 xff0c 欢迎讨论 一 物种 基因的进化 二 基因组学 2 1 比较基因组学揭示保守区 2 2 比较基因组学揭示功能元件 例如上图的
  • 图解机器学习之回归模型性能评估指标

    一个房价预测的任务 xff0c 老板说你看看这个模型咋样 xff1f 我们先绘制一个坐标轴 xff1a Y 轴为房价 xff0c X 轴为年份 将过去房价数据绘制为绿色 xff0c 回归模型绘制为蓝色 关键问题是 xff0c 怎么知道这个模
  • Chrome 将 http 域名自动跳转 https 的解决方案

    问题来源 使用 Chrome 内核浏览器 xff0c 包括 Google Chrome xff0c edge xff0c 360浏览器等 为了安全在访问同一域名时 xff0c 只要访问过带有 https 域名 xff0c 如果再使用http
  • 一文读懂相分离(图文详解)

    目录 什么是相分离 xff1f 相分离的原理 相分离的分子功能 生物信息中的相分离 一 什么是相分离 xff1f 相分离 phase separation 本身是一个物理化学概念 xff0c 二元或多元混合物会在一定的条件下分离为不同的相
  • g++: 内部错误:Killed (程序 cc1plus)

    这个原因是内存不足 xff0c 在linux下增加临时swap空间 step 1 sudo dd if 61 dev zero of 61 home swap bs 61 64M count 61 16 注释 xff1a of 61 hom
  • React 开发 | 样式模块化

    1 使用 ES6 实现样式模块化 xff0c 避免样式冲突 index module css span class token punctuation span title span class token punctuation span