react如何让组件内部样式私有化

最近自己玩着做一个react的项目，组件之间的样式相互干扰，给我造成困扰。

找了好几种方法，感觉不太好用。

直到...

//使用 CSS Modules 的方式引入

关键是 在css文件后面加上.module后缀表明这个是私有的。
非常简单，粗暴，真香。
推荐系数5个星。

import React, { Component } from 'react';
import styles from './Button.module.css'; // 使用 CSS Modules 的方式引入
//在 css 文件后面加 .module 后缀
import './another-stylesheet.css'; // 普通引入

class Button extends Component {
  render() {
    // reference as a js object
    return <button className={styles.error}>Error Button</button>;
  }
}