react-10样式模块化(./index.module.css, <div className={welcome.title}>Welcome</div>)

1.react样式模块化

避免各个组件类名相同 相关样式冲突所以需要样式模块化。比如在组件Hello中的样式引入,将样式文件名更改为index.module.css如下图。

2. 文件中引入模块以及使用

文件中import引入模块样式

javascript 复制代码
import welcome from "./index.module.css";

DOM节点中进行添加样式

html 复制代码
 <div className={welcome.title}>Welcome</div>

整体代码

javascript 复制代码
import React, { Component } from "react";
import welcome from "./index.module.css";

class Welcome extends Component {
  render() {
    return (
      <div className={welcome.title}>Welcome</div>
    );
  }
}

export default Welcome;
相关推荐
AbelTomato10 分钟前
博客评论系统搭建回顾
javascript·typescript·cloudflare·supabase·hyperdrive
梦醒沉醉13 分钟前
4、函数function
javascript
Csvn26 分钟前
模块化与工程化:CJS / ESM / 打包器,到底怎么协作?
前端
hunterandroid37 分钟前
[鸿蒙从零到一] ArkTS Sendable 数据模型与跨线程共享实战
前端
摇滚侠1 小时前
《SpringBoot 3:入门与应用实战》第 9 章 使用 WebMvc 开发应用 阅读笔记 22
javascript·spring boot·笔记
AICoder码农王1 小时前
Vitest 实战:从一个真实项目看懂测试套件
前端·前端框架
xiaominlaopodaren1 小时前
three.js地图视口瓦片(一):屏幕角点射线
javascript·gis·three.js
律宏阔1 小时前
Electron Forge 在 macOS M4 打包踩坑:Node.js 26 导致 make 异常中断
前端
木木爱研究1 小时前
elpis-里程碑四-基于Vue完成动态组件库建设
前端·后端
一水行1 小时前
博客评论系统搭建回顾
javascript·后端