Vuetifyjs 单独文本字段样式通过降低高度不起作用

Question

我在 vuetify js 中添加了一个单独的文本字段并将它放在我的工具栏中，但我想降低文本字段的高度，使其整齐地排列在工具栏上

所以我有

    <v-toolbar dense flat dark color="primary">
        <v-app-bar-nav-icon></v-app-bar-nav-icon>
        <v-toolbar-title>Title</v-toolbar-title>
        <v-text-field
                class="minimize-height"
                hide-details
                light
                solo
                      height="20px"
                placeholder="Search an item here"
        ></v-text-field>

        <v-spacer></v-spacer>

        <v-divider inset
                   vertical
        ></v-divider>

        <v-btn text class="text-none">
            Action Menu
        </v-btn>

    </v-toolbar>

这产生

我如何控制文本字段高度，因为即使添加高度值也不起作用。

我也尝试通过添加一个类来添加一个 css

.minimize-height{
    height:10px!important //this still doesnt work
 }

我还包含了这个显示完整代码的代码笔

Answer 1

您可以缩小输入槽，因为它不会低于某个最小高度：

.v-input__slot {
 transform : scale(.65)
}

代码笔

Answer 2

这就是你的麻烦所在：

您可以将其覆盖为fit-content如下所示：

请记住提供更高的 CSS 规范以使其工作。 另外，不要全局覆盖 Vuetify 的默认类。

Answer 3

以下代码片段对我有用-

 <v-app-bar color="black" dark app clipped-left>
      <v-toolbar-title>Decrypt</v-toolbar-title>

      <v-spacer></v-spacer>

      <v-text-field solo dense hide-details label="Search" prepend-inner-icon="mdi-magnify"></v-text-field>

      <v-spacer></v-spacer>

      <v-btn icon>
        <v-icon>mdi-heart</v-icon>
      </v-btn>

      <v-btn icon>
        <v-icon>mdi-magnify</v-icon>
      </v-btn>
    </v-app-bar>