react 如何实现样式隔离

在react组件中,默认所有的样式文件都是全局作用域,不存在样式隔离

方法一: 根标签选择器限制
如果需要每个组件样式隔离, 在设置组件样式时, 每一个选择器都添加组件根标签选择器, 以区分不同组件中的样式

方法二: 使用CSS Modules   css模块化
1, 创建组件样式文件时以 xxx.module.css命名, 例如 Home.module.css 代替  Home.css 
2, 在组件jsx导入样式文件时使用 import styles from './xxx.module.css' 导入  代替  import './xxx.css'
3, 在组件中需要设置样式的标签上添加class值, className={styles.yyy}  其中yyy指的是css样式中的class值
4, 在xxx.module.css中通过 .yyy{} 设置样式,即为局部样式

一般建议:
    自定义组件的样式,自己写的样式使用方法一
    第三方导入的组件或样式文件,使用方法二