react中的css污染问题(CSS Modules)

        由于项目创建时,子组件都被导入到了父组件中,而子组件同级的css文件又顺延上去,结果就是各组件之间相同选择器样式在其他组件上全部生效,从而造成组件之间样式相互覆盖.

解决:

        1)手动给各个子组件样式文件内容外层包一个统一的属性名,比如子组件名(前提是用sass/less);

        2)CSS IN JS: 以js的方式来处理css 。思想是让css有局部作用域全局作用域这样的区分(推荐方案)

CSS IN JS是什么

CSS IN JS：是使用 JavaScript 编写 CSS 的统称，用来解决 CSS 样式冲突、覆盖等问题;

CSS IN JS 的具体实现有 50 多种，比如：CSS Modules、styled-components 等;

React 推荐使用：CSS Modules （React脚手架已集成，可直接使用）

CSS Modules使用详解

步骤:

        1) 改样式文件名。从 xx.scss -> xx.module.scss （React脚手架中的约定，与普通 CSS 作区分）

        2) 引入: 一般情况将引入的对象命名为 styles.

import styles from './index.module.scss'

        3) 通过 s