Vuetifyを導入したとき、色反映されない

Question

Ruby on railsのAPIをVueで出力するアプリを作成中です。
Vuetifyを導入しようとしています。

<template>
  <div>
    <v-btn color="success">Success</v-btn>
    <v-btn color="error">Error</v-btn>
    <v-btn color="warning">Warning</v-btn>
    <v-btn color="info">Info</v-btn>
  </div>
</template>
<script lang="ts">
  import Vuetify from "vuetify";
  import 'vuetify/dist/vuetify.min.css';
  Vue.use(Vuetify);

  @Component
  export default class HomeContainer extends Vue {}
</script>

ボタンの周りを <div> で囲った場合、色がつかないのですが、

<v-app>
  <v-btn color="success">Success</v-btn>
  <v-btn color="error">Error</v-btn>
  <v-btn color="warning">Warning</v-btn>
  <v-btn color="info">Info</v-btn>
</v-app>

<v-app> で囲った場合、色はつくのですが、幅が100%になってしまいます。

そしてアラートが逆に幅が小さくなってしまいます。

原因わかる方いらっしゃいますか？

Answer 1

パーツごとにdivで囲ってあげたらうまくいきました。解決！

Answer 2

vuetify.min.cssにそうなるように記述されているからです。

詳細はVuetify公式ドキュメント参照
https://vuetifyjs.com/ja/getting-started/quick-start