Ionic 7中如何修改ion-input的边框颜色？

针对你遇到的Ionic7新语法中ion-input（outline样式）--border-color不生效、加!important会覆盖状态色的问题，给你两个可行的解决方案：

方案一：利用CSS伪类精准控制基础状态颜色 #

通过:not()伪类排除错误、聚焦、有效/无效等状态，只在基础状态下设置边框色，这样状态相关的颜色样式仍能正常生效：

ion-input.box {
  /* 仅在非错误、非聚焦、非验证状态时应用基础边框色 */
  &:not(.input-error):not(.ion-focused):not(.ion-valid):not(.ion-invalid) {
    --border-color: #666; /* 替换为你的基础颜色 */
  }

  /* 保留错误状态的danger颜色 */
  &.input-error {
    --border-color: var(--ion-color-danger);
  }

  /* 聚焦状态使用主题主色（按需调整） */
  &.ion-focused {
    --border-color: var(--ion-color-primary);
  }
}

方案二：通过::part穿透Shadow DOM设置内部元素 #

Ionic的组件支持::part选择器访问内部Shadow DOM元素，ion-input的outline边框对应内部的input-outline部件，直接针对它设置样式：

/* 基础状态边框色 */
ion-input.box::part(input-outline) {
  border-color: #666; /* 替换为你的基础颜色 */
}

/* 错误状态下覆盖为danger色 */
ion-input.box.input-error::part(input-outline) {
  border-color: var(--ion-color-danger);
}

/* 聚焦状态使用主题主色 */
ion-input.box.ion-focused::part(input-outline) {
  border-color: var(--ion-color-primary);
}

说明 #

• 之前直接设置--border-color无效，是因为Ionic7对ion-input的不同状态（聚焦、错误、验证）设置了优先级更高的样式变量，基础状态的变量被覆盖。
• 两种方案都能避免使用!important，同时保留输入框状态（错误、聚焦等）的颜色提示功能，符合你需要的交互逻辑。

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