当前位置: 首页 > 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;
http://www.dtcms.com/a/165222.html

相关文章:

  • 神经网络用于地震数据时空均匀插值的方法与开源资料
  • 六、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的区别
  • 云备份服务器,数据备份服务器的方法有哪些?
  • 配置和使用基本存储
  • Golang - 实现文件管理服务器
  • 如何用AI生成个人职业照/西装照?
  • SALOME源码分析: SMESH模块
  • 17、商品管理:魔药商店运营——React 19 CRUD实现
  • React 后台管理系统
  • 涨薪技术|0到1学会性能测试第43课-apache status模块监控
  • SPL 量化 回测
  • 论文阅读:2024 arxiv Jailbreaking Black Box Large Language Models in Twenty Queries
  • python合并word中的run
  • Ubuntu ZLMediakit的标准配置文件(rtsp->rtmp->hls)