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;
相关推荐
心连欣28 分钟前
解锁对象遍历:当字符串遇上for...in循环
前端·javascript
Sestid31 分钟前
前端Cursor使用指南(后续会更新Claude)
前端·claude·cursor
戴维南37 分钟前
LangChain 在 Agent 开发中的定位:10 个模块(含代码对比,耳机售后案例)
前端
ouzz1 小时前
使用纯canvas绘制一个掘金首页
前端·canvas
用户6957584491281 小时前
Vue 3 响应式系统:解构赋值与依赖收集的正确姿势
前端
乐乐同学yorsal1 小时前
一个 TypeScript 写的图片视频处理工具箱,吊打一切付费软件!
前端·命令行
lzhdim1 小时前
SQL 入门 10:SQL 内置函数:数值、字符串与时间处理
前端·数据库·sql
jstopo网站1 小时前
水厂水泵工作流程图canvas动画
前端·javascript
张元清1 小时前
5 分钟用 Vite SSR 搭建一个全栈 React 应用
前端·javascript·面试
空中海1 小时前
6.1 主题与暗色模式
运维·服务器·前端·flutter