v-text 필드의 최소 높이 제한을 확인하시겠습니까?

v-text 필드의 최소 높이 제한을 확인하시겠습니까?

저는 v-text-field가 있고 높이를 37px로 설정하려고 하는데 최소 높이가 49px여야 할 것 같습니다.이걸 무효로 할 방법이 있나요?커스텀 css를 넣으려고 했는데 크롬 인스펙터에서는 동작하는 것 같은데 타겟팅이 되지 않습니다.

커스텀 css 스타일링을 적용한 코데펜을 만들었습니다.https://codepen.io/anon/pen/MMEmex

 <div id="app">
  <v-app id="inspire">
   <v-container>
   <v-text-field solo placeholder="trying to adjust the height" 
   height="37px"></v-text-field>
   </v-container>
  </v-app>
  </div>

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

이 css를 Chrome 인스펙터 툴의 .v-input-slot에 적용하면 동작하는 것 같습니다.

  .v-input__slot {
  min-height: auto !important;
 display: flex !important;
 align-items: center !important;
 }

여러분, 잘 부탁드립니다.

css 셀렉터는 다음과 같습니다.

 .v-text-field .v-input__control .v-input__slot {
    min-height: auto !important;
    display: flex !important;
    align-items: center !important;
  }

코드펜 데모

농후하게 쓰다

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

이는 이터스의 답변을 기반으로 하지만 텍스트 필드 라벨, 아이콘 및 세부사항도 그에 따라 축소됩니다.

.v-text-field .v-input__control .v-input__slot {
  min-height: 0 !important;
  padding: 0 8px !important;
  margin-bottom: 2px !important;
  display: flex !important;
  align-items: center !important;
}

.v-text-field .v-input__control .v-input__slot .v-input__append-inner {
  margin-top: 5px !important;
}

.v-text-field .v-input__control .v-input__slot label {
  margin-top: -12px !important;
}

.v-text-field .v-input__control .v-input__slot label.v-label--active {
  margin: 0 0 0 5px !important;
}

.v-text-field__details {
  margin: 2px !important;
}

1. 제거한다.scoped로부터의 귀속.<style>부분
2. 요소에 사용자 정의 클래스 설정(예:class="custom-class"
3. 예를 들어, 중첩된 요소에 사용자 지정 css 스타일을 설정합니다..custom-class .any-nested-element-class {min-height: 32px;}

언급URL : https://stackoverflow.com/questions/56774641/vuetify-v-text-field-minimum-height-limitation