是否可以调整 vuetify 组件的大小？答案

【问题标题】：Is it possible to resize vuetify components?是否可以调整 vuetify 组件的大小？
【发布时间】：2018-09-14 18:08:07
【问题描述】：

我最近使用 Vuetify 来实现一些 UI 设计。但是，我发现默认的输入组件（例如 v-text-field、v-select）太大了。我发现我可以调整它们的宽度，但是对于高度和字体大小，我该如何更改它们呢？

【问题讨论】：

在按照以下建议提交一些 CSS harakiri 之前，请查看文档 vuetifyjs.com/en/api/v-input/#sass-variables

【解决方案1】：

我在使用 CSS 变换来缩小所有内容方面取得了一些成功：

.compact-form {
    transform: scale(0.875);
    transform-origin: left;
}

只需将其添加到您的表单中即可。它将字体大小降低到 14 像素（而不是 16 像素）并缩小复选框等等。

【讨论】：

此解决方案完美运行。接受的答案不适用于概述的文本字段。

【解决方案2】：

虽然您可以使用:style 绑定，但要获得您想要的，您必须求助于 CSS。

您可以使用!important 来“强制”您的样式，但也有其他方法可以使其在没有它的情况下工作。请参阅下面的演示。

new Vue({
  el: '#app'
});

#styled-input {
  height: 40px;
  font-size: 20pt;
}
.styled-input label[for] {
  height: 40px;
  font-size: 20pt;
}

<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'>
<link rel='stylesheet prefetch' href='https://unpkg.com/vuetify@1.0.13/dist/vuetify.min.css'>
<script src='https://unpkg.com/babel-polyfill/dist/polyfill.min.js'></script>
<script src='https://unpkg.com/vue/dist/vue.js'></script>
<script src='https://unpkg.com/vuetify@1.0.13/dist/vuetify.min.js'></script>

<div id="app">
  <v-app id="inspire">
    <v-container fluid>
      <v-layout row>
        <v-flex>
          <v-text-field name="input-1" label="Regular Input"></v-text-field>
          <v-text-field name="input-1" label="Styled Input" id="styled-input" class="styled-input"></v-text-field>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>

【讨论】：

【解决方案3】：

我认为应该始终使用原生 vuetify 方式，而不是仅仅使用相同或更强的 CSS 选择器，甚至进行一些 CSS 转换来改变整个元素的大小...

您可以在 Vuetify 文档中查找所有变量（每个组件都可以找到更多变量）： https://vuetifyjs.com/en/api/vuetify/#sass-variables

确保检查如何启用覆盖变量的可能性： https://vuetifyjs.com/en/features/sass-variables/

例如，您可以通过覆盖 $input-font-size: 18px; 变量来更改文本字段的字体大小

【讨论】：

这应该是公认的答案，+1 没有 hacks。

【解决方案4】：

https://vuetifyjs.com/en/api/v-text-field/#props

添加密集

<v-text-field dense></v-text-field>

【讨论】：

【解决方案5】：

您可以按如下方式直接引用。

在您的模板代码中：

<v-text-field
    class = "inputField input-name p-3 styled-input"
    label="username"
    name="username"
    type="text"
    :state="nameState"
    v-model="credentials.username"
    :rules="rules.username"
    color="#01579B"
    box
    required
/>

在您的样式代码中：

.input-name {
    background-color: #ffffff;
    margin-top: 10px;
}

【讨论】：