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

相关推荐
IT_陈寒几秒前
Redis持久化配置漏了这一步,线上数据丢了5小时
前端·人工智能·后端
梦曦i3 分钟前
create-uni-app v1.2.0:交互体验优化
前端·uni-app
Moment5 分钟前
太好了!NestJS 12 大版本转向 ESM,新项目默认构建换 Rspack
前端·javascript·后端
Csvn9 分钟前
泛型与条件类型:TypeScript 类型体操的核心
前端
涛涛ing11 分钟前
一周之内,前端 AI 编程的格局被彻底改写了三次
前端·程序员
fxss13 分钟前
免费儿童学习网站
前端
Eiceblue39 分钟前
如何构建一个纯前端 Word 转 Markdown 转换器(React + WebAssembly)
前端·react.js·word
平头哥~1 小时前
Day 15 | 不改一行 HTML,给页面加上引号、角标和标签
前端·javascript·css·html·css3·学习资料
风骏时光牛马1 小时前
后端系统性能监控与异常告警管理
前端
Fluxart.ai2 小时前
GPT Image 2 国内怎么用?在 Flux Art 完成图片生成与编辑
前端·javascript·gpt