例えば、props の値を元に割り当てる class を動的に切り替えたい場合、以下のような実装をしてもうまくスタイルが当たってくれない。

<script setup lang="ts">
export type ButtonProps = {
  type: 'primary' | 'secondary' | 'info';
  text: string;
};
defineProps<ButtonProps>();
</script>

<template>
  <button type="button" :class="[$style.button, `${$style}.${type}`]">
    {{ text }}
  </button>
</template>

<style module>
.button {
  padding: 10px;
}

.primary {
  color: red;
}

.secondary {
  color: yellow;
}

.info {
  color: blue;
}
</style>

動的に割り当てたいクラスが 2 つ程度であれば、以下のように三項演算子を使えばいいけど、 3 つい上になってくると三項演算子では対応できない。

<template>
  <button
    type="button"
    :class="[$style.button, props.type === 'primary' ? $style.primary : $style.secondary]"
  >
    {{ text }}
  </button>
</template>

解決策1. setup 関数内で CSS Modules で定義した識別子を参照する

useCssModule を使う方法。

<script setup lang="ts">
import { useCssModule } from 'vue';

export type ButtonProps = {
  type: 'primary' | 'secondary' | 'info';
  text: string;
};
defineProps<ButtonProps>();

const $style = useCssModule();
const classArray = [
  $style.button,
  props.type === 'primary' && $style.primary,
  props.type === 'secondary' && $style.secondary,
  props.type === 'info' && $style.info,
];
</script>

<template>
  <button type="button" :class="classArray">
    {{ text }}
  </button>
</template>

<style module>
.button {
  padding: 10px;
}

...省略
</style>

参照を追うのが若干大変な気もする？

解決策2. `:class` ディレクティブ内で式展開を行う

<script setup lang="ts">
export type ButtonProps = {
  type: 'primary' | 'secondary' | 'info';
  text: string;
};
defineProps<ButtonProps>();
</script>

<template>
  <button
    type="button"
    :class="[
      $style.button,
      props.type === 'primary' && $style.primary,
      props.type === 'secondary' && $style.secondary,
      props.type === 'info' && $style.info,
    ]"
  >
    {{ text }}
  </button>
</template>

<style module>
.button {
  padding: 10px;
}

...省略
</style>

:class ディレクティブ内が若干賑やかになるけど、個人的にはこっちの方が素直で好きかも。

解決策3. ドット記法ではなくブラケット記法で参照する(New!)

ブラケット記法を使うと簡単にできるらしい。

<script setup lang="ts">
export type ButtonProps = {
  type: 'primary' | 'secondary' | 'info';
  text: string;
};
defineProps<ButtonProps>();
</script>

<template>
  <button type="button" :class="[$style.button, $style[type]]">
    {{ text }}
  </button>
</template>

<style module>
.button {
  padding: 10px;
}

.primary {
  color: red;
}

.secondary {
  color: yellow;
}

.info {
  color: blue;
}
</style>

$style も JS のオブジェクトなんだから、そりゃそうだよねっていう。

参考

Discussion