关于CSS Modules全局污染解决

CSS Modules初学者经常会碰到的一个问题是，如何如何避免全局污染？
ok，let’s GO。
在开发中，我们都知道运用CSS Modules的全局作用域来设定我们要的类，但是我们有时候会，也会因为全局作用而污染到其他模块。

那么，根据一些权威文档，我们可以查到用:local（局部作用域）。
下面看具体问题和解决方案

---

问题：
当我们设置如下样式的时候，整个项目的所有表格的td都会按照下面的样式跟着改动。
也就是说，我们要对元素标签进行设置的时候全局作用域的优点就变成了全局污染这个缺点了。

tbody tr td{
    text-align: center!important;
    color: #00cc00
  }

这就是css Modules的全局污染！
按照正常的思维，我们在页面引入哪个css文件，就会只是在当前页面中起作用。（引入：import styles from '../styles.css';）

---

解决：
我们的解决方案是加上局部作用域:local看一下具体代码如何实现吧。
（1）:local(.类名)

:local(.biaoge-duli){
  tbody tr td{
    text-align: center!important;
    color: #00cc00
  }
}

（2）页面引用

import styles from '../styles.css';//对应的文件名

---

<Table className={styg['biaoge-duli']} />

对于这个问题就解决了。
对于此类的问题，需要对标签的元素进行样式操作而又无法直接在对应的标签元素加上class名就这样解决了。
最后，总结一下:local的用法。

:local(.className) { background: red; }
:local .className { color: green; }
:local(.className .subClass) { color: green; }

最后提供两个关于CSS Modules具体使用和基本用法的网站。
1—CSS Modules 用法教程：http://www.ruanyifeng.com/blog/2016/06/css_modules.html
2—CSS Modules 详解及 React 中实践：https://zhuanlan.zhihu.com/p/20495964?columnSlug=purerender