React中组件样式相互影响解决方案

React中组件样式相互影响解决方案,第1张

最近开始自学react框架,并总结一些路上的坑,避免大家走弯路
一、业务场景:
在引入组件的时候,由于想保留文件样式的独立性,不影响其他组件。
像平常一样引入的话没有效果。
Vue使用的scope,但是react就稍微有一些繁琐了
二、解决方案:
这里需要给css文件,添加上module前缀,并且引用时,需要从文件中导出一个变量,通过变量来取文件中的class名称,

三、实现过程:
1、创建css文件,注意格式(Child.module.css)

.mod{
    color: pink;
}

2、在组件中引入样式,并取值
import React from 'react'
import style from './Child.module.css'
export default function modu() {
    return ( <div className={style.mod}> 我是module div>
)
}

四、效果展示

今天的分享到此结束,欢迎小伙伴们一起交流

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1321408.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-06-12
下一篇 2022-06-12

发表评论

登录后才能评论

评论列表(0条)

保存