Vue.js vutify 他画面に影響が出る

Question

Vue.jsのライブラリであるVutifyを使うときに以下の記述を使うのですが、

import 'vuetify/dist/vuetify.min.css'

これが他のフォーム画面に影響を出してしまっています

###問題

index.html

<div id="app">
  <transition name="bounce" appear>
    <div v-show="show">
        <%= link_to "お問い合わせ",contacts_path %>
  </transition>
</div>
<%= javascript_pack_tag 'top' %>

top.js

import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";

Vue.use(Vuetify);

new Vue({
  el: '#app',
  data: {
    show: true
  }
})

お問い合わせ画面

<%= form_for(@contact, url: { action: :check }) do |f| %>
  <div>
    <h2>お問い合わせ</h2>

      <% if @contact.errors.present? %>
        <div>
          <strong>入力内容にエラーがあります</strong>
          <ul>
            <% @contact.errors.each do |attr, error| %>
              <li><%= error %></li>
            <% end %>
          </ul>
        </div>
      <% end %>

    <div>
      <strong>名前</strong>
      <p><%= f.text_field :name, placeholder: '20文字以内' %></p>
    </div>
    <div>
      <strong>メールアドレス</strong>
      <p><%= f.text_field :email, placeholder: '30文字以内' %></p>
    </div>
    <div>
      <strong>内容</strong>
      <p><%= f.text_area :content, placeholder: '1000文字以内' %></p>
    </div>
      <%= f.submit '確認画面へ' %>
  </div>
<% end %>

お問い合わせ画面に入ると以下の画面にならないといけないのですが、

一番初めに遷移した場合崩れた画面になってしまいます
リロードすれば本来の画面になります

###試したこと

import 'vuetify/dist/vuetify.min.css'

を消せば問題解決になるのですが、vutifyを使うためには消してはいけない(vutifyが適用されない？)コードのようです
他のフォーム画面に影響が出ないようにするにはどうせれば良いでしょうか？

Answer 1

まず、vuetifyのcssをimportすることで、他のフォームに影響してしまって原因ですが、これはreset cssが適用されているからです。
vuetifyのbootstrap cssの中でブラウザごとに初期値が設定されているスタイルをrestしてvuetifyのcssを適用できるようにするためのcssが含まれています。

参考: https://vuetifyjs.com/en/styles/css-reset/

リロードすると本来の画面に戻る原因に関しては、アプリケーションの全体構成がわからないので、なんとも原因が特定しづらいですが、今わかっている内容から考えられる解決策は次のものがあります。

• resetされてしまっているstyleを明示的に指定し直す
• 対象のフォームにもvuetifyを使用する

前者の対応をする場合、以下のcssでresetされているstyleを明示的に指定することになります。
https://github.com/filipelinhares/ress/blob/master/ress.css