使用css module来在项目中做多套样式，各个style标签里相同的类名里相同的属性会被覆盖

[loveyy520]

第一次提问，我想使用css module来在项目中做多套样式，但是发现相同的类名里相同的属性会被覆盖。
如下， 给h1标签绑定类名

<template>
    <!-- 使用css module，类名后加上相应后缀 -->
    <h1 :class="style.h1">Home</h1>
</template>

已经导入了computed等函数，在<script setup>里声明style变量：

const style = computed(() => useCssModule("classical")); 

然后是我的style标签：

<!-- 第一套样式 -->
<style module="classical">
.h1 {
  background-color: pink;
}
</style>

<!-- 第二套样式 -->
<style module="style2">
.h1 {
  background-color: yellow;
  border-radius: 5px;
}
</style>

这时候我发现，即使我给useCssModule传入的是"classical"，但是h1的背景颜色却是yellow，而不是我期望的pink颜色。我希望它是classical对应的pink颜色，然后在之后我点了某个按钮之后，切换到style2对应的样式。
对此，我采取的措施是在每套样式里的各个类名后面加上相应的后缀，如 .h1-classical { } 和 .h1-style2 { }，并在temlate里相应用到的地方做修改。尽管可以达到我期望的效果，但是我觉得这样有些麻烦，有没有方法让我在 useCssModule("classical")的时候，类名样式不受 <style module="style2">里的样式的影响呢？