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 名去使用

相关推荐
晓得迷路了几秒前
栗子前端技术周刊第 145 期 - Remix 3 RC、htmx 4.0、Rslib 1.0...
前端·javascript·react.js
恋猫de小郭6 分钟前
OpenAI :GPT-6 开始你需要给 Skill 和 AGENTS.md 做一次大扫除了
前端·人工智能·ai编程
IT_陈寒6 分钟前
Redis莫名连接失败,查了三天居然是配置的锅
前端·人工智能·后端
晴天167 分钟前
Esbuild:前端构建工具的“速度革命”
前端
雪芽蓝域zzs11 分钟前
第三十五节:Axios 统一错误拦截、401 Token 过期处理
前端·javascript·vue.js
XIE39216 分钟前
TipKit:开源富文本编辑器套件,一套逻辑,任意风格!
前端·笔记·开源
范什么特西30 分钟前
一些常用名词
开发语言·前端·javascript
晴天1632 分钟前
前端打包工具全景解析
前端
晴天1634 分钟前
Vite vs Webpack 全方位对比
前端·webpack·node.js
体毛旺盛的猿36 分钟前
HarmonyOS开发面试题
前端·华为·harmonyos