根据设计设置高度 vuetify 文本字段答案

【问题标题】：Set height vuetify textfield according to design根据设计设置高度 vuetify 文本字段
【发布时间】：2020-03-20 08:06:32
【问题描述】：

我的代码笔中有 1.5.x 版本的 vuetify 文本字段：https://codepen.io/handy29/pen/yLLwjGg 但文本字段的高度不符合我的设计。我也已经关注this link，正如您在我的代码 (html) 中看到的那样，文本字段仍然相同。到目前为止，我在 css 中的代码：

.theme--light.v-text-field--outline > .v-input__control > .v-input__slot {
    border-width: 1px;
  }

.theme--light.v-text-field--outline:not(.v-input--is-focused):not(.v-input--has-state)>.v-input__control>.v-input__slot:hover{
border-width: 1px;
border-style: solid;
  border-color: #6fbd44;

}

我的 html 代码：

<div id="app">
  <v-app id="inspire">
    <v-form>
      <v-container>
        <v-layout row wrap>

          <v-flex xs12 sm6 md3>
            <v-text-field
              width="700px;"
              height="-1"
              outline
              single-line
            ></v-text-field>
          </v-flex>


        </v-layout>
      </v-container>
    </v-form>
  </v-app>
</div>

我该怎么办？谢谢

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

您必须在 v-input__slot 类中取消设置 css 属性 min-height 并设置 height 属性：

.v-input__slot {
 min-height: unset;
 height: 30px;
}

【讨论】：