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;
相关推荐
计算机魔术师2 分钟前
烧掉2780亿美元还不够?OpenAI的资本豪赌让人头皮发麻
前端
IT_陈寒1 小时前
Java线程池用错参数,我的服务居然悄悄崩溃了
前端·人工智能·后端
神秘的猪头1 小时前
React 脱围机制(二):重新理解 useEffect——它不是生命周期,而是同步外部系统
react.js
卡布鲁1 小时前
React useMemo 与 useCallback 完全指南:原理、场景与避坑
前端·react.js
碳基修炼1 小时前
排查记:本地 devServer 是 http,浏览器却把 302 重定向升级成了 https
前端·http
步行cgn1 小时前
Spring p 命名空间注入详解
java·前端·spring
何何____1 小时前
Vue 生命周期详解
前端·javascript
江米小枣tonylua2 小时前
TypeScript 全面の拥抱 !Prisma 8 + Electron 升级实战
前端
闪耀之光M782 小时前
npm命令解析
前端
咸鱼老弟2 小时前
AI Agent 的"自主性悖论"——为什么给它的自由度越大,越要配一套更硬的护栏
前端·人工智能