模块化

cuz 使用 CSS Modules 实现 css 的模块化编写.

css-modules #

使用 CSS Modules, 所有样式将默认只能在当前 import 的 js 文件作用域中生效. 这意味着不会再发生命名冲突或者样式覆盖等问题. CSS Modules 同样支持继承 class 的能力, 以实现 css 的可复用性.

请查看官方文档以了解更多.

使用 #

创建 styles.css 文件, 并以正常方式编写 styles.

/* styles.css */

.saveBtn {
  composes: btn from '../components/btn';
  color: white;
}

在 js component 中导入该 CSS 文件, 然后在 JSX 中引用该 class 名字.

import styles from './styles.css';

// ...

return (
  <button className={ styles.saveBtn }>
    Save
  </button>
);