javascript - Vuetify 使标签离控件太近

Question

Vuetify我像这样在我的 Vue 应用程序中添加了插件：

import vuetify from './plugins/vuetify';

new Vue({
  router,
  store,
  vuetify,
  render: h => h(App)
}).$mount('#app')

但是，当我尝试文档中的一些示例时，它们在我的浏览器（谷歌浏览器）中看起来不同。

例如：

这是我的代码产生的：

<v-row align="center">
   <v-checkbox
      v-model="enabled"
      hide-details
      class="shrink mr-2 mt-0" 
   ></v-checkbox>
   <v-text-field
      :disabled="!enabled"
      label="I only work if you check the box"
   ></v-text-field>
</v-row>

这与文档网站上的控件相同。

图标也是如此。使用此代码：

<v-text-field
    label="Prepend inner"
    prepend-inner-icon="mdi-map-marker"
></v-text-field>

但是文档示例看起来像这样。（请注意，图标/控件和标签文本之间的空格较小）

为什么会发生这种情况以及如何解决？

版本：

vue@2.6.11
vuetify@2.3.13

标签： javascriptvue.jsmaterial-designvuetify.js