vuetifyの子コンポーネントにCSSを適用する方法

Vuetifyの子コンポーネントにCSSを適用する方法

UIコンポーネントのライブラリー(Vuetifyなど)を使用していると、UIコンポーネントのスタイルを変更したい場合があります。

しかし、親コンポーネントからVuetifyの子コンポーネントにスタイルを適用しても反映されないことがあります。今回は、親コンポーネントからVuetifyの子コンポーネントにCSSを適用する方法を紹介します。

親コンポーネントからVueifyの子コンポーネントにCSSを適用する方法

以下のサンプルでは、v-breadcrumbsコンポーネントを使用し、パンくずリストにスタイルを適用する例になります。

スタイルが適用されない例

パンくずリストのフォントを赤にするスタイルを適用していますが、実際には適用されていません。

サンプルコードのstyleタグに記述されているスタイルは、v-breadcrumbsコンポーネントの中にあるv-breadcrumbs-item--linkに適用されるはずですが、適用されていません。

ここからv-breadcrumbsコンポーネントの中にあるv-breadcrumbs-item--linkに、vueファイルから直接スタイルを変更できないことが確認できます。

サンプルコード

templatescriptstyle

vue

<template>
  <nav>
    <v-breadcrumbs :items="items">
      <template v-slot:divider>
        <v-icon :icon="mdiChevronRight"></v-icon>
      </template>
    </v-breadcrumbs>
  </nav>
</template>

vue

<script setup lang="ts">
import { mdiChevronRight } from '@mdi/js';
import { useRoute } from 'vitepress';
import { computed } from 'vue';

const route = useRoute();
const items = computed(() => {
    const paths = route.path.split('/').filter((i) => i);
    return paths.map((path, index) => ({
        title: path.split('.')[0],
        disabled: index === paths.length - 1,
        href: `/${paths.slice(0, index + 1).join('/')}/`,
    }));
});
</script>

vue

<style scoped>
/* scopedのため、v-breadcrumbsの子コンポーネントにスタイルが反映されない */
.v-breadcrumbs-item--link {
  color: red;
}
</style>

スタイルが適用される例

Vuetifyの子コンポーネントにCSSを適用する方法として、:deep()を使用する方法があります。
:deep()を使用することで、親コンポーネントから子コンポーネントにスタイルを適用することが出来ます。

サンプルコード

templatescriptstyle

vue

<template>
  <nav>
    <v-breadcrumbs :items="items">
      <template v-slot:divider>
        <v-icon :icon="mdiChevronRight"></v-icon>
      </template>
    </v-breadcrumbs>
  </nav>
</template>

vue

<script setup lang="ts">
import { mdiChevronRight } from '@mdi/js';
import { useRoute } from 'vitepress';
import { computed } from 'vue';

const route = useRoute();
const items = computed(() => {
    const paths = route.path.split('/').filter((i) => i);
    return paths.map((path, index) => ({
        title: path.split('.')[0],
        disabled: index === paths.length - 1,
        href: `/${paths.slice(0, index + 1).join('/')}/`,
    }));
});
</script>

vue

<style scoped>
:deep(.v-breadcrumbs-item--link) {
  color: red;
}
</style>

参考

https://ja.vuejs.org/api/sfc-css-features.html#scoped

vuetifyの子コンポーネントにCSSを適用する方法