IonInput CSS自定义属性对辅助文本失效，求解决方案

我发现IonInput的CSS自定义属性对辅助文本不起作用，尝试修改辅助文本颜色但无效果。设置helper-text-color="danger"后，辅助文本和输入框颜色一致，无法区分。想知道有没有单独针对辅助文本定义自定义属性的方法或替代方案。

当前代码 #

组件代码

<template>
  <ion-input label-placement="floating" color="primary" fill="outline" placeholder="Text" label="title" helper-text="error" helper-text-color="danger">
  </ion-input>
  <ion-button fill="clear" slot="end" aria-label="Show/hide">
    <ion-icon slot="icon-only" :icon="eyeOff" aria-hidden="true"></ion-icon>
  </ion-button>
</template>

<script lang="ts">
import { IonInput } from '@ionic/vue';
import { eyeOff } from 'ionicons/icons';
import { defineComponent } from 'vue';

export default defineComponent({
  components: {
    IonInput
  },
  setup() {
    return { eyeOff };
  },
});
</script>

颜色配置

/* Dark Mode Colors */
:root {
    --ion-color-danger: #c5000f;
    --ion-color-danger-rgb: 197, 0, 15;
    --ion-color-danger-contrast: #ffffff;
    --ion-color-danger-contrast-rgb: 255, 255, 255;
    --ion-color-danger-shade: #ad000d;
    --ion-color-danger-tint: #cb1a27;
}

@media (prefers-color-scheme: light) {
    :root {
        --ion-color-danger: #cb1a27;
        --ion-color-danger-rgb: 203, 26, 39;
        --ion-color-danger-contrast: #ffffff;
        --ion-color-danger-contrast-rgb: 255, 255, 255;
        --ion-color-danger-shade: #b01720;
        --ion-color-danger-tint: #d2343f;
    }
}
span.ion-text-left {
    margin-right: auto;
}

方法一：使用Ionic官方提供的辅助文本自定义属性 #

Ionic内置了专门针对辅助文本的CSS变量--helper-text-color，可全局或局部配置：

/* 全局设置所有IonInput的辅助文本颜色 */
ion-input {
  --helper-text-color: var(--ion-color-danger);
}

/* 仅针对单个输入框设置 */
.error-input {
  --helper-text-color: #c5000f;
}

在模板中给目标ion-input添加类名：

<ion-input class="error-input" ...></ion-input>

方法二：通过深度选择器直接定位辅助文本元素 #

如果自定义属性未生效，用Vue的深度选择器直接选中辅助文本DOM元素：

/* Vue3 写法 */
:deep(.ion-input-helper-text) {
  color: var(--ion-color-danger) !important;
}

/* Vue2 写法（二选一） */
>>> .ion-input-helper-text {
  color: var(--ion-color-danger) !important;
}

/deep/ .ion-input-helper-text {
  color: var(--ion-color-danger) !important;
}

方法三：单独渲染辅助文本组件 #

若helper-text-color属性存在版本兼容性问题，改用ion-note组件单独渲染辅助文本，手动控制样式：

<template>
  <ion-input label-placement="floating" color="primary" fill="outline" placeholder="Text" label="title">
  </ion-input>
  <ion-note color="danger" class="ion-margin-start">error</ion-note>
  <!-- 按钮部分 -->
</template>

内容的提问来源于stack exchange，提问作者Daniel Esenwa