vuetify v-text-field prepend-inner slot 的图标不会随着输入状态的变化而改变颜色答案

【问题标题】：vuetify v-text-field prepend-inner slot's icon isn't changing color with input state changesvuetify v-text-field prepend-inner slot 的图标不会随着输入状态的变化而改变颜色
【发布时间】：2021-06-19 08:24:16
【问题描述】：

我想在v-text-field 中使用电话图标（mdi-phone）作为prepend-inner。

我可以像下面这样写，一切正常：

<v-text-field
    type="tel"
    v-if="!numberIsEntered"
    label="phone number"
    clearable
    required
    color="#ff5b1b"
    :rules="[
        rules.required,
        rules.internationalNumber,
        rules.nationalNumber
    ]"
    class="mt-10 mb-15"
    v-model="userLoginDetails.userNumber"
    outlined></v-text-field>

此代码中的图标会随着输入状态的变化而改变颜色。如果出现错误并且输入变为红色，则图标的颜色也会变为红色。

但我想旋转图标，所以我在<v-text-field></v-text-field> 中添加了以下代码：

  <template v-slot:prepend-inner>
      <v-icon style="transform:rotateY(-180deg)">mdi-phone</v-icon>
  </template>

现在图标的颜色不会随着不同的输入状态而改变（例如：错误，...）。

这是一个错误还是有办法修复它？

编辑：这个问题是由 vuetify 使用 dark 主题属性覆盖图标样式引起的。我将代码改写如下：

<template v-slot:prepend-inner>
    <i aria-hidden="true" class="v-icon notranslate mdi mdi-phone" 
        style="transform: rotateY(-180deg);"></i>
</template>

【问题讨论】：

标签： vue.js vuejs2 vuetify.js

【解决方案1】：

尝试将图标名称作为prop传递，以便与输入的颜色相同，然后定义样式规则来旋转图标：

<v-text-field
    type="tel"
     class="phone-input"
     prepend-inner-icon="mdi-phone"
   ...
    outlined></v-text-field>

风格：

.phone-input .v-icon{
  transform:rotateY(-180deg)
}

LIVE DEMO

【讨论】：

非常感谢。这也有效。我只是在寻找一种使用较少 css 代码的方法。