Question

在我的<v-toolbar>组件中，我想设置文本字段搜索，并在其前面添加图标搜索：

<v-text-field                                                                                                                                  
    solo-inverted                                                                                                                                                        
    prepend-icon="search"                                                                                                                                                
    label="Search"                                                                                                                                                       
    class="hidden-sm-and-down"                                                                                                                                           
    >                                                                                                                                                                    
</v-text-field>

这有效，但是它给了我我不喜欢的结果：

我不喜欢它，因为我希望文本字段和图标都为白色，所以我在前面的代码中添加了属性background-color="white"：

<v-text-field                                                                                                                                                          
    background-color="white"                                                                                                                                             
    solo-inverted                                                                                                                                                        
    prepend-icon="search"                                                                                                                                                
    label="Search"                                                                                                                                                       
    class="hidden-sm-and-down"                                                                                                                                           
    >                                                                                                                                                                    
</v-text-field>

这给了我一半我想要的东西：

如何将图标的颜色更改为白色？

我在Vuetify.js API上进行了一些搜索，但在那里找不到合适的选项。

Answer 1

您可以按类别覆盖图标颜色

OR

您可以使用v-text-field类覆盖图标颜色，例如：

.hidden-sm-and-down .v-icon {
    color: white !important;
}

Answer 2

有类似的问题。因此，我以vuetify为例显示选色器

<v-menu
    v-model="menu"
    :close-on-content-click="false"
    transition="scale-transition"
>
    <v-text-field
       slot="activator"
       v-model="newClass.color.hex"
       label="color"
       readonly
    >
       <v-icon slot="prepend" :color="newClass.color.hex">
          format_color_fill
       </v-icon>
    </v-text-field>
    <material-picker v-model="newClass.color" />
 </v-menu>

如何更改<v-text-field>图标的颜色？

2 个答案: