react中样式冲突解决

• CSS IN JS：是使用 JavaScript 编写 CSS 的统称，用来解决 CSS 样式冲突、覆盖等问题
  CSS IN JS 的具体实现有 50 多种，比如：React常用（CSS Modules、styled-components）、 Vue常用（<style scoped> 、css modules）等
  推荐使用：CSS Modules （React脚手架已集成，可直接使用）

• 在React多人开发中 css中的类肯定会发生冲突
  • 如果每个页面的样式文件加上.module（文件名.module.scss）那么就会避免冲突（原理是将模块的类和id后面会随机生成一些字符串 防止避免冲突）
  • 我们如何获取到那个随机的类呢
    • 例如A页面 目录结构 a -> a.module.scss 在组件导入该样式后，会返回一个对象，这个对象关于对模块中的class类名处理后的类名

1. 文件名  .module.css    .module.scss    .module.less  方式命名 否则无法使用

2. 使用方法

import React from 'react'

import styles from './home.module.scss' //引入文件

export default function Home() {
    return (

        <div>

            <div className={`${styles.a}`}>home</div>

        </div>

    )

}

3！如果想类名设为全局 我们就不能对类名进行处理 我们需要再类名外面包裹一层:global

:global(.类名)