CSS Module 在vue和react中的多类名写法

vue：

<van-panel :class="[$style.others, $style.panel]"/>

动态添加类名：

:class="[$style['tag-active'], {[$style['tag-normal']]: bool}]"/> // bool 为定义的bool值变量， true时添加对应的类名， false则反之

react:

className={[styles.logistics, styles.borderColor].join(' ')}

styles是我自己定义的引入外部样式文件的变量名称， 如下：

import styles from './list.module.scss'

比较优雅的写法：

css module 有个方法组合样式，就是使用compoese。

可以有多个composes，但是composes类名必须位于其他规则之前。扩展仅适用于局部作用域的选择器，并且仅在选择器为单个类名称时才适用。当一个类名组合另一个类名时，CSS模块将导出本地类的两个类名。可以添加多个类名。

可以用composes组成多个类: classNameA classNameB; 用例如下

.theme {
  color: red;
} // .theme 要写在 .total之前

.total {
  composes: theme;
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}
 // 之后在标签中只需要填写total 类名

详情使用查看官方文档