当前位置: 首页 > ai >正文

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

1.react样式模块化

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

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

文件中import引入模块样式

import welcome from "./index.module.css";

 DOM节点中进行添加样式

 <div className={welcome.title}>Welcome</div>

整体代码

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;
http://www.xdnf.cn/news/3034.html

相关文章:

  • 磁盘文件系统【Linux操作系统】
  • C语言发展史:从Unix起源到现代标准演进
  • vite入门教程
  • 表征(Representations)、嵌入(Embeddings)及潜空间(Latent space)
  • Spring之AOP面向切面编程
  • 【0基础】Git使用教程
  • mysqlbinlog恢复数据
  • vscode vim插件操作查缺补漏
  • 景联文科技牵头起草的《信息技术 可扩展的生物特征识别数据交换格式 第4部分:指纹图像数据》国家标准正式发布
  • Linux指令
  • 基于单片机的音频信号处理系统设计(二)
  • Python 错误 — 此环境由外部管理error: externally-manage(如何解决)
  • centos 安装jenkins
  • 模拟频谱分析仪(Linux c++ Qt)
  • 告别手动时代!物联网软件开发让万物自动互联
  • 从单一 AI 到多智能体系统:构建更智慧的世界
  • 关于安卓自动化打包docker+jenkins实现
  • 《Python实战进阶》 No46:CPython的GIL与多线程优化
  • 2025-03 机器人等级考试三级理论真题 3级
  • 区块链+医疗:破解数据共享困局,筑牢隐私安全防线
  • 聊聊Spring AI Alibaba的MermaidGenerator
  • Java 核心--泛型枚举
  • 【KWDB 创作者计划】_深度解析KWDB存储引擎
  • vue elementui 去掉默认填充 密码input导致的默认填充
  • 大连理工大学选修课——机器学习笔记(8):Boosting及提升树
  • 2025年深圳杯-东三省联赛赛题浅析-助攻快速选题
  • 第四部分:赋予网页健壮的灵魂 —— TypeScript(中)
  • word模板填充导出-(支持word导出、pdf导出)
  • 抢先体验 | Qwen3 模型发布:基于 ZStack AIOS 平台极速体验
  • 第二章-科学计算库NumPy