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

最近开始自学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>
)
}

四、效果展示

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