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;
相关推荐
小小小小宇5 小时前
TS泛型笔记
前端
小小小小宇5 小时前
前端canvas手动实现复杂动画示例
前端
codingandsleeping5 小时前
重读《你不知道的JavaScript》(上)- 作用域和闭包
前端·javascript
小小小小宇5 小时前
前端PerformanceObserver使用
前端
zhangxingchao6 小时前
Flutter中的页面跳转
前端
前端风云志6 小时前
TypeScript实用类型之Omit
javascript
烛阴7 小时前
Puppeteer入门指南:掌控浏览器,开启自动化新时代
前端·javascript
全宝7 小时前
🖲️一行代码实现鼠标换肤
前端·css·html
小小小小宇8 小时前
前端模拟一个setTimeout
前端
萌萌哒草头将军8 小时前
🚀🚀🚀 不要只知道 Vite 了,可以看看 Farm ,Rust 编写的快速且一致的打包工具
前端·vue.js·react.js