Vuetify 3:v-overlay の透明度を変更するには

Vuetify 2 は props にありましたが、3 には無いので css で変更します。
対象のコンポーネントでのみ透明度を変更する場合の例です。

<template>
  <slot />
  <v-overlay
    class="hoge"
  >
    <v-btn>test</v-btn>
  </overlay>
</template>

<style scoped>
.hoge :deep(.v-overlay__scrim) {
  opacity: 0;
}
</style>

コンポーネント内のクラスである hoge 配下にある v-overlay__scrim クラスの透明度を 0 に変更することで、透明なオーバーレイになります。
他の所の v-overlay は透明度 0.32(デフォルト)で使えます。

コメント