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;
相关推荐
Ai_easygo23 分钟前
AI Agent开发入门——从ReAct到Tool Calling,拆解Agent的底层运行逻辑
前端·人工智能·react.js
研☆香35 分钟前
分析制作html页面,如何划分页面结构
前端
kyriewen1 小时前
我扒了最近的前端面经——2026年面试不背八股文了,考这5样
前端·面试·ai编程
IT_陈寒1 小时前
Redis的持久化配置把我坑惨了:你以为数据安全了?
前端·人工智能·后端
小徐_23331 小时前
uni-app 项目别再从零搭了!3 个 Wot UI 起手模板怎么选?
前端·uni-app
张元清2 小时前
React useResizeObserver Hook:追踪元素尺寸变化(2026)
javascript·react.js
赵庆明老师2 小时前
Vben精讲:16-熟悉Vite前端工具链
前端
瑞瑞小同学4 小时前
处理echarts x轴内容过多,重叠问题
前端·javascript·echarts
HexCIer4 小时前
面向未来的原子化 CSS:UnoCSS 核心架构分析与 Tailwind CSS 现状
前端·css·vite
程序员黑豆5 小时前
鸿蒙应用开发中的单位详解:px、vp、fp、lpx
前端·harmonyos