Vuetifyのv-cardのshadowの色や透明度を調整したい

前提・実現したいこと

vue.jsの初心者で、vue CLIを用いつつvuetifyを用いてみようと考えている者です。
vuetifyのv-cardのshadowの色や透明度を調整したいのですが、どうしてもやり方がわからず困っています。
ご教授の程よろしくお願いいたします。

該当のソースコード

vue
1<v-card class="white">
2  <v-card-text>hoge</v-card-text>
3</v-card>

試したこと

elevationを調整するとshadowが広がることはわかったのですが、実現したいことはshadowの色や透明度の調整です。

環境

vue: 2.6.12
vuetify: 2.3.10
vue/cli: 4.5.4

行動規範の内容に同意します

回答1件

ベストアンサー

v-cardのshadowの色や透明度は、CSSで定義されています。

.v-sheet.v-card:not(.v-sheet--outlined) {
  box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
}

このCSSを変更することで、任意の色や透明度に変更することができます。

Vuetifyの場合は、各コンポーネントのbox-shadowの値を共通化しています。
ですので、Vuetifyの「SASS Variables」を用いた設定変更をすると、v-card以外のコンポーネントにも影響が出てしまいます。
cf: https://vuetifyjs.com/en/features/sass-variables/
cf: https://github.com/.../_elevations.scss

v-cardのみ変更されたい場合は、cssを上書きする方法しかありません。
ご検討ください。

投稿2020/10/02 23:29

編集2020/10/02 23:30