自定义vuetify文本字段并选择

Question

我尝试使用v-text-field自定义v-selecy，遇到了一些问题。

我设法自定义了v-text-field-更改了字体，页边距，修饰等。效果很好，但是当我跳入v-select时，看起来并不容易。

以下是v-select组件的代码：

<template>
    <v-select
            class="header-multi-select"
            label="Chips"
            hide-details="true"
            height="16"
            attach
            chips
            multiple
    ></v-select>
</template>

<script>
    export default {
        name: 'HeaderMultiSelect'
    }
</script>

<style scoped>
    .header-multi-select >>> i {
        font-size: 16px;
    }

    .header-multi-select >>> label {
        font: 500 12px "Inter UI";
        color: #33373E;
        line-height: 16px;
        top: 16px;
    }
</style>

自定义v-text-field

<template>
    <v-text-field
            class="header-text-field-input"
            hideDetails="true"
            :label="label"
            :append-icon="icon"
    ></v-text-field>
</template>

<script>
    export default {
        name: "HeaderTextField",
        props: {
            label: {
                type: String,
                required: true
            },
            icon: {
                type: String,
                required: true
            }
        }
    }
</script>

<style scoped>
    .header-text-field-input >>> i {
        font-size: 16px;
    }

    .header-text-field-input >>> label {
        font: 500 12px "Inter UI";
        color: #33373E;
        line-height: 16px;
        top: 3px;
    }

    .header-text-field-input >>> input {
        height: 16px;
        font: 500 12px "Inter UI";
        color: #33373E;
        line-height: 16px;
    }
</style>

要进行选择，我必须移至底部，一行和右侧字体图标。是否有任何良好且流畅的样式来设置样式？