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) 通过 styles 对象访问对象中的样式名来设置样式

// css类名是index.module.scss中定义的类名

(需注意, css类名中如果有 '-' 则要改为styles[ css类名 ]. 因为最终这个类名会生成为styles对象上的一个属性. 一般推荐使用小驼峰命名法)

CSS Modules 维持类名

        CSSModules 防止样式污染的原理其实也是在类名上做手脚.而:global(css类名) 就能阻止这个改动的动作发生. 如图

 这样一来我们就可以用这个方法覆盖第三方UI库的样式了:

:global(.ant-btn) {
  color: red !important;
}

CSSModule 用法拓展:

// index.module.scss
.root {
  display: 'block';
  position: 'absolute';
  // 此处，使用 global 包裹其他子节点的类名，这些类名就不会被处理，在 JSX 中使用时，就可以用字符串形式的类名
  // 如果不加 :global ，所有类名就必须添加 styles.title 才可以
  :global {
    .title {
      .text {
      }
      span {
      }
    }
    .login-form { ... }
  }
}

组件内使用时就可以直接写类名:

import styles from './index.module.scss'
const 组件 = () => {
  return (
    {/* （1） 根节点使用 CSSModules 形式的类名（ 根元素的类名： `root` ）*/}
  	

      {/* （2） 所有子节点，都使用普通的 CSS 类名*/}
    	

      	登录  
      	登录  
      
			

    
  )
}