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

相关推荐
Hyyy1 小时前
流式渲染用react-markdown还是Vercel/Streamdown
前端
风中的小甜瓜2 小时前
ASP.NET Page 那点事
java·前端·asp.net
木西2 小时前
告别机械重复:使用 Node.js + Playwright 构建 24 小时全自动测试网领水脚本
前端·javascript·node.js
西柚小萌新2 小时前
【论文写作】--LaTeX详细入门教程2
前端·html
qdkfz2 小时前
JavaScript 如何解析 Outlook .msg 文件 —— @kenjiuno/msgreader
前端·javascript
LuckyDog阿祥2 小时前
卸载Microsoft Edge:EdgeRemover完整操作指南
前端·edge
zhangxingchao2 小时前
AI应用开发九:从 Hermes Agent 学长期记忆
前端·人工智能·后端
xiaofeichaichai3 小时前
Vite原理与Webpack对比
前端·webpack·node.js
_杨瀚博3 小时前
小程序拍证件并局部裁剪
前端