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;
相关推荐
EndingCoder1 小时前
React从基础入门到高级实战:React 基础入门 - React Hooks 入门
前端·javascript·react.js·前端框架
EndingCoder1 小时前
React从基础入门到高级实战:React 基础入门 - JSX与组件基础
前端·javascript·react.js·前端框架
Space Chars2 小时前
【大前端】使用NodeJs HTTP模块创建web服务器、SSE通讯
服务器·前端·http
Quke陆吾2 小时前
Vue框架1(vue搭建方式1,vue指令,vue实例生命周期)
前端·javascript·vue.js
Oscar_02083 小时前
uniapp+ts 多环境编译
前端·vue.js·typescript·uni-app
shmily麻瓜小菜鸡3 小时前
前端项目中实现页面看起来像是浏览器缩放到了80%的效果
前端
EndingCoder3 小时前
从零基础到最佳实践:Vue.js 系列(9/10):《单元测试与端到端测试》
前端·javascript·vue.js·性能优化·单元测试·vue3
How_doyou_do3 小时前
Vue-创建应用/挂载应用/根组件模版-.vue单文件/应用配置
前端·javascript·vue.js
王者鳜錸4 小时前
Vue3集成Element Plus完整指南:从安装到主题定制下-实现后台管理系统框架搭建
前端·javascript·vue.js
YJlio4 小时前
优启通添加自定义浏览器及EXLOAD使用技巧分享
前端