一、局部作用域

  css的规则都是全局的,任何一个组件的样式规则,都对整个页面有效。产生局部作用域的唯一方法,就是使用一个独一无二的class的名字,不会与其他选择器重名,但是当我们与其他人共同开发的时候,无法保证一定与其他人不同,这时候就要用到css modules

  下面是一个React组件App.js:

 

import React from 'react';
import style from './App.css';
 
export default () => {
  return (
    <h1 className={style.title}>
      Hello World
    </h1>
  );
};

 

  上面代码中,我们将样式文件App.css输入到style对象,然后引用style.title代表一个class:

.title {
  color: red;
}

  构建工具会将类名style.title编译成一个哈希字符串

 

<h1 class="_3zyde4l1yATCOkgn-DBWEL">
  Hello World
</h1>

  App.css也会同时被编译:

._3zyde4l1yATCOkgn-DBWEL {
  color: red;
}

  这样一来,这个类名就变成独一无二了,只对App组件有效。

二、global

  使用global声明的class,都不会被编译成哈希字符串。

:global {
   .title{    }
}

三、使用场景

  我们使用的组件的样式大部分都是全局样式,使用局部方式声明class经过编译后,无法与组件的默认样式class匹配,样式自然就无法进行覆盖。

  要覆盖默认样式就需要使用全局样式,需要使用global声明的class。这样就不会被编译成哈希字符串也就能够覆盖默认样式了。