IonInput CSS 自定义属性不适用于帮助文本

Question

我注意到 CSS 自定义属性不适用于辅助文本。我尝试更改辅助文本颜色，但没有任何反应。是否有解决方法或某种方法来定义自定义属性以单独考虑帮助程序文本？下面的代码只是给出了与输入字段相同的颜色，这没有帮助。我正在使用库存颜色 rn

//for the input field
<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>

//the color code
/* 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;
}

这就是我目前正在使用的

Answer 1

您可以通过在输入上添加一个类，然后修改输入内的 helper-text 类来修改输入的 css。

<template>
  <ion-input label-placement="floating" color="primary" fill="outline" placeholder="Text" label="title" helper-text="error" class="custom"></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>

//the color code
/* 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;
}

ion-input.custom.ios .input-bottom .helper-text,
ion-input.custom.md .input-bottom .helper-text {
  color: var(--ion-color-danger)
}

在这里，我添加了支持

ios

和

md

模式的颜色，但如果需要，您可以将其定义为特定于平台。