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

Question

我在我的代码笔https://codepen.io/handy29/pen/yLLwjGg中使用了1.5.x版本的文本字段，但是文本字段的高度不符合我的设计。正如您在我的代码（html）中看到的那样，我也已经遵循this link的文本字段仍然相同。到目前为止，我在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>

我该怎么办？谢谢

Answer 1

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

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