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;
相关推荐
Wenhao.11 分钟前
Go-web开发之帖子功能
开发语言·前端·golang
蓝婷儿19 分钟前
前端面试每日三题 - Day 22
前端·面试·职场和发展
java1234_小锋24 分钟前
如何配置NGINX作为反向代理服务器来缓存后端服务的响应?
前端·nginx·缓存
A_aspectJ41 分钟前
【Bootstrap V4系列】学习入门教程之 表格(Tables)和画像(Figure)
前端·bootstrap·dreamweaver
同聘云1 小时前
腾讯云web服务器配置步骤是什么?web服务器有什么用途?
服务器·前端·腾讯云
巴巴_羊1 小时前
CSS八股 3
前端·css
前后端杂货铺1 小时前
uniapp利用生命周期函数实现后台常驻示例
android·前端·ios·微信小程序·uni-app
大道归简2 小时前
案例:自动化获取Web页面小说(没钱修什么仙)——selenium
前端·selenium·自动化
Deepsleep.8 小时前
东田数码科技前端面经
前端·科技·面试
涵信9 小时前
第十八节:开放性问题-Vue生态未来趋势
前端·vue.js·devops