组件间样式覆盖问题--CSS Modules

1.组件间样式覆盖问题

① 问题：CityList 组件的样式，会影响 Map 组件的样式
② 原因：在配置路由时，CityList 和 Map 组件都被导入到项目中，那么组件的样式也就被导入到项目中了。如果组件之间样式名称相同，那么一个组件中的样式就会在另一个组件中也生效，从而造成组件之间样式相互覆盖的问题。
③ 结论：默认，只要导入了组件，不管组件有没有显示在页面中，组件的样式就会生效。
④ 如何解决？

1. 手动处理 （起不同的类名）
2. CSS IN JS

2. CSS IN JS

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

3. CSS Modules 的说明

• CSS Modules 通过对 CSS 类名重命名，保证每个类名的唯一性，从而避免样式冲突的问题
• 换句话说：所有类名都具有“局部作用域”，只在当前组件内部生效
• 实现方式：webpack的 css-loader 插件
• 命名采用：BEM（Block 块、Element 元素、Modifier 三部分组成）命名规范，比如：.list__item_active
• 在 React 脚手架中演化成：文件名、类名、hash（随机）三部分，只需要指定类名即可

/* 自动生成的类名，我们只需要提供 classname 即可 */
[filename]_[classname]__[hash]

// 类名
.error {}
// 生成后的类名
.Button_error__ax7yz

4.React中使用CSS Modules

1. 创建名为 [name].module.css 的样式文件（React脚手架中的约定，与普通 CSS 作区分）

// 创建样式文件名
index.module.css

1. 组件中导入该样式文件（注意语法）

// 在 CityList 组件中导入样式文件：
import styles from ‘./index.module.css’

1. 通过 styles 对象访问对象中的样式名来设置样式

这里是引用 div className={styles.test}><div

5.React中编写CSS的常见方案

参考：

https://blog.csdn.net/m0_71485750/article/details/126713426

https://lanan.blog.csdn.net/article/details/126715988