踩坑笔记(八):React中局部css样式的实现

本文总结了在React项目中如何设置和实现局部样式,避免组件间的样式冲突。通过将样式文件命名为.module.css,并在jsx中import导入,使用局部类选择器来定义样式。需要注意的是,测试发现less文件可能不生效,需要引入css。
摘要由CSDN通过智能技术生成

 前言:在Vue项目组可以直接通过添加scoped的方式实现局部样式;但在React项目中,在组件中需要设置css/less样式,有时会出现className冲突的情况,导致影响到其他组件的问题。因此,在查阅相关资料后,在这里总结下React项目中局部样式的设置与实现。

步骤:

  1. 将css/less等样式文件命名为xxx.module.css/less

  2. 在jsx文件通过import导入

//普通导入方式
import "./job.css"
// 局部样式导入方式,styles命名自定义
import styles from "./job.module.css'

备注:这里测试less文件好像不生效;需要引入css才可以

  1. 在render函数中定义命名j局部类选择器
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值