react 中css 使用css-module 解决命名重复问题

css module

1、每个css文件都当作单独的模块,命令xxxx.module.css
2、为每个className 增加后缀名,不让他重复
3、Create-React-App 原生支持css Module

使用方法 定义xxxx.module.css 文件比如我定义了user.module.css 在里面定义了一个css

js 复制代码
.container {
    border: 1px solid red;
}

那么在使用的时候可以这么用

js 复制代码
 // 第一步:
import style from './user.module.css'

// 第二步:
<p className={ style.container }>
    Page - x: {mouse.pageX}, y: {mouse.pageY}
</p>

要用style.xxx class 名去使用

相关推荐
李高钢5 分钟前
Python Flask 框架入门:从零搭建你的第一个 Web 应用
前端·python·flask
特立独行的猫A7 分钟前
用仓颉语言写 Coding Agent:cjh 是怎么实现的
前端
特立独行的猫A9 分钟前
cjh:基于华为仓颉语言的原生 Coding Agent Harness 实践与设计思考
前端
晚安日记wanna15 分钟前
大文件分片上传的五层追问从 Blob 切片到秒传与弱网容错
前端·面试
Htr_20 分钟前
Anysite.io 使用指南:把整个 Web 变成 AI 智能体的数据库
前端·数据库·人工智能
知兀23 分钟前
【前端】受控和非受控组件
前端·javascript·react
玉宇夕落24 分钟前
别再把 SSE 当普通流式了!从 EventSource 到 LangChain,一次讲透实时推送与流式输出
前端
CappuccinoRose26 分钟前
专项事件体系
前端·学习·网络状态·表单事件·剪贴板事件·拖放事件·页面可见性
李剑一31 分钟前
各位产品经理求你们优化一下吧,暗黑模式最大的BUG!文中附解决方案
前端
huali1 小时前
vue-split-screen:让 Vue Router 的导航轨迹变成两个页面
前端·javascript·vue.js