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

相关推荐
无我Code3 小时前
开发者-2026年中总结
前端·面试·程序员
浮生望4 小时前
React 受控与非受控组件:从表单状态管理到实时校验的完整实践
前端
糖墨夕5 小时前
第二章:AI Agent 到底是个啥?—— 用生活场景把概念讲明白
前端
Csvn5 小时前
⚡ content-visibility: auto —— 长页面渲染提速的隐藏神器,白捡的性能优化
前端
用户938515635075 小时前
深入理解 Next.js:从 SPA 的 SEO 问题到约定式路由与 SSR 原理
前端·后端·全栈
snow@li6 小时前
web:前端500知识点/速查手册
前端
kyriewen7 小时前
今年裁了16万技术人——但字节前端岗反而涨了23%
前端·javascript·面试
用户059540174467 小时前
把 AI Agent 记忆存储验证从 40 分钟手测压到 3 分钟,pytest + Docker 这套组合太顶了
前端·css
stereohomology7 小时前
MS Edge很多事的一点是把地址栏复制的地址自动转标题文本
前端·edge
imaol18 小时前
链表 -- 环链表
java·前端·链表