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;
相关推荐
iナナ27 分钟前
Spring Web MVC入门
java·前端·网络·后端·spring·mvc
驱动探索者31 分钟前
find 命令使用介绍
java·linux·运维·服务器·前端·学习·microsoft
开心不就得了37 分钟前
自定义脚手架
前端·javascript
星晨雪海2 小时前
怎么格式化idea中的vue文件
前端·vue.js·intellij-idea
没事多睡觉6662 小时前
Vue 虚拟列表实现方案详解:三种方法的完整对比与实践
前端·javascript·vue.js
white-persist2 小时前
Burp Suite模拟器抓包全攻略
前端·网络·安全·web安全·notepad++·原型模式
ObjectX前端实验室3 小时前
【前端工程化】脚手架篇 - 模板引擎 & 动态依赖管理脚手架
前端
GISer_Jing3 小时前
前端GIS篇——WebGIS、WebGL、Java后端篇
java·前端·webgl
excel3 小时前
Vue3 EffectScope 源码解析与理解
前端·javascript·面试
细节控菜鸡3 小时前
【2025最新】ArcGIS for JS 实现地图卷帘效果
开发语言·javascript·arcgis