Vuetify V-文本字段前置-内部插槽的图标不会随着输入状态的变化而改变颜色

Question

我想使用手机图标(mdi-phone(作为v-text-field中的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>

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

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

---

EDIT：此问题是由vuetify用dark主题属性覆盖图标样式引起的。我把代码改写如下：

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

Answer 1

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

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

样式：

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

现场演示