【Vue 3】VuetifyのCSSスタイルをコンポーネント内で強制的に上書きする方法

VuetifyのCSSプロパティを変更する

Vue3、VuetifyによるUIの一部のCSSスタイルを変更しようとしてできなかったので、その際のメモです。

環境 : Vue.js 3.3.4, Vuetify 3.3.4

Scoped CSSでは上書きできない

ローカルコンポーネントのScoped CSSからのスタイル定義ではVuetifyのスタイルをリセットできないようですので、scopedとは別に通常のstyleタグを書いて、その中で上書きしました。

（例）v-tableというタグでテーブルを描画した際、Vuetifyにより自動的に描画されたtableタグの親要素、div.v-table__wrapperのスタイルを変更

<style scoped>
  /* some css style */
</style>

<style>
div.v-table__wrapper {
  /* some css style */
}
</style>

Follow me!