Ionic 7升级后，如何设置ion-input原标签的颜色？

直接修改CSS变量（最快方式） #

Ionic 7 把原ion-label的样式整合到了ion-input自身的CSS变量里，要设置标签（浮动提示文字）颜色，直接给ion-input配置--color变量就行：

/* 全局所有输入框生效 */
ion-input {
  --color: #666; /* 替换成你需要的颜色值 */
}

如果要区分默认状态和聚焦状态的颜色：

/* 默认状态标签颜色 */
ion-input {
  --color: #999;
}
/* 聚焦时标签变色 */
ion-input:focus {
  --color: #1677ff;
}

自定义类实现局部修改 #

如果只想给特定输入框改颜色，先定义CSS类：

.input-custom-label {
  --color: #2ecc71;
}

再在HTML里绑定这个类：

<ion-input class="input-custom-label" placeholder="请输入内容"></ion-input>

全局主题统一配置（推荐） #

要是想让所有输入框的标签颜色和项目主题统一，直接修改src/theme/variables.css里的全局变量：

:root {
  /* 输入框默认标签颜色 */
  --ion-text-color: #666;
  /* 输入框聚焦时标签颜色，默认继承主题主色，也可以单独设置 */
  --ion-color-primary: #1677ff;
}

⚠️ 注意：如果要修改占位符文字的颜色，要用--placeholder-color变量，别和标签的--color搞混了。

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