美化React组件之CSS Modules

每个组件都有自己的样式，称之为局部样式，CSS Modules保证局部样式不污染全局样式，同时组件也会引入全局样式。

幸运的是，create-react-app自从2.0.0版本开始已经开始支持CSS Modules，详见连接。之前的版本需要先eject，然后手动配置webpack支持。

使用方法

• 局部样式，命名规则: xxx.module.css

 

.wrapper {
  ...
}

.my-btn {
  ...
}

:local(.title) {
  ...
}

:global(.title) {
  ...
}

.my-btn:hover {
  ...
}

...

• 全局样式，只要不以.module.css结尾即可

body {
  ...
}

.btn {
  ...
}

...

• 组件引入样式

 

...
// 引入全局样式 
import 'xxx/common.css';
// 引入局部样式
import styles from './xxx.module.css';
...
<!-- className不带中划线，直接用.即可 -->
<div className={styles.wrapper}>
  <!-- 同时引入全局、局部样式，且如果className带中划线，用['className']代替 -->
  <button className={`btn ${styles['my-btn']}`}>save</button>
</div>
...

原文链接： https://zhuanlan.zhihu.com/p/50837353