CSS Modules with React

• 每個React Component可以有自己的.css檔，透過webpack就可以讓它像JavaScript檔一樣被import進來，

import styles from 'styles.css'
function Button () {
  return <div className={styles.container}>Yo</div>
}

• 這樣做也可以更簡單地讓css class互相做組合(compose)。不僅在同一個檔案裡面可以組合不同的class，甚至也可以組合不同檔案裡面的class。

/* colors.css */
.primary {
  background-color: #ff000;
}

.button {
  height: 50px;
  width: 100px;
}
.dark {
  composes: button;
  background: #000;
}
.light {
  composes: button;
  composes: primary from '../shared/colors.css';
}