当前位置: 首页 > news >正文

react-10样式模块化(./index.module.css, <div className={welcome.title}>Welcome</div>)

1.react样式模块化

        避免各个组件类名相同 相关样式冲突所以需要样式模块化。比如在组件Hello中的样式引入,将样式文件名更改为index.module.css如下图。

2. 文件中引入模块以及使用

文件中import引入模块样式

import welcome from "./index.module.css";

 DOM节点中进行添加样式

 <div className={welcome.title}>Welcome</div>

整体代码

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;

相关文章:

  • 神经网络用于地震数据时空均匀插值的方法与开源资料
  • 六、UI自动化测试06--PO设计模式
  • micro-app前端微服务原理解析
  • 论文笔记(八十二)Transformers without Normalization
  • linux系统加固
  • 逻辑回归之参数选择:从理论到实践
  • GNU gettext 快速上手
  • 两向量平行公式、向量与平面平行公式、两平面平行公式;两向量垂直公式、向量与平面垂直公式、两平面垂直公式
  • 基于 HT 构建 2D 智慧仓储可视化系统的技术解析
  • IP 地址和 MAC 地址是如何转换的
  • mac下载homebrew 安装和使用git
  • 3.2goweb框架GORM
  • 基于BM1684X+RK3588的智能工业视觉边缘计算盒子解决方案
  • c++线程的创建
  • 【Hive入门】Hive高级特性:事务表与ACID特性详解
  • 大数据平台与数据仓库的核心差异是什么?
  • openharmony 4.1 运行busybox工具包(保姆教程)
  • encodeURI和encodeURICompoent的区别
  • 云备份服务器,数据备份服务器的方法有哪些?
  • 配置和使用基本存储
  • “非思”的思想——探索失语者的思想史
  • 北京银行一季度净赚超76亿降逾2%,不良贷款率微降
  • 海尔·2025青岛马拉松两选手被终身禁赛:违规转让号码、穿戴他人号码
  • 国家统计局:一季度全国规模以上文化及相关产业企业营业收入增长6.2%
  • 俄乌战火不熄,特朗普在梵蒂冈与泽连斯基会晤后口风突变
  • 商务部:将打造一批国际消费集聚区和入境消费友好商圈