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

相关推荐
禅思院4 分钟前
大列表性能优化 · 工程实战·四
开发语言·前端·性能优化·前端框架·php·异步加载
rising start4 分钟前
五、Vue3 ref 用法 + Props 完整指南
前端·javascript·vue.js
web打印社区5 分钟前
前端html转换pdf并静默打印pdf最佳实现路径
前端·javascript·vue.js·electron·html
Curvatureflight15 分钟前
浏览器音频采集实践:麦克风权限、降噪、回声消除与 PCM 转换
前端·javascript·音视频·信息与通信·web·pcm
Dontla17 分钟前
HTML实体转义(HTML Entity Escaping)介绍
前端·html
咸鱼翻身小阿橙18 分钟前
高斯模糊降噪/磨皮算法降噪图像
前端·opencv·算法·webpack·c#
ct97820 分钟前
ES6 新特性
前端·vue.js·性能优化
KaMeidebaby26 分钟前
卡梅德生物技术快报|抗原如何自己检测?FAdV-4 重组抗原制备与 ELISA 体系技术调试指南
前端·人工智能·物联网·算法·百度
一拳不是超人29 分钟前
AI 辅助研发时代,如何用“规范 Skill”缩短测试周期
前端·人工智能·代码规范
夜郎king2 小时前
湖南高考天气查询:基于 HTML5 与百度天气 API 实现页面展示
前端·html5·百度天气实践·天气信息可视化