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

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上进行了一些搜索，但没有找到合适的选项。

- Billal Begueradj

---

可能是 在 Vuetify 中使用 prepend-icon 定义图标的样式 的重复问题。 - Traxo

你的问题帮助了我以下代码：filled light background-color="white"谢谢。 - Mohamed Raza

Answer 1

我曾经遇到过类似的问题。因此，我将使用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>

- Kirill Manakhov

Answer 2

您可以通过类来覆盖图标颜色

或者

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

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

- Nika Kurashvili

---

我编辑了我的回答，我忘记在v-icon前加点号，它是一个类而不是HTML标签。 - Nika Kurashvili

请注意，你的答案提倡一种不好的做法（关于 !important），可能会产生副作用。请参考链接问题中的一个答案。 - Traxo