更改离子日期时间值的颜色答案

【问题标题】：Change color of ion-datetime value更改离子日期时间值的颜色
【发布时间】：2020-09-23 05:08:32
【问题描述】：

如何更改 ion-datetime 值的颜色？文档https://ionicframework.com/docs/api/datetime#css-custom-properties 仅显示占位符颜色的 css 变量。

但是如何改变值颜色呢？

--color:没有效果。

【问题讨论】：

标签： css angular typescript ionic-framework colors

【解决方案1】：

我已经在 Ionic 5+/Angular 上实现了它：

global.scss

ion-picker>.picker-wrapper {
    background-color: var(--dark-theme-color) !important;
}

.picker-opt {
    color: #7994A2 !important;
}

.picker-opt.picker-opt-selected {
    color: var(--ion-color-light) !important;
}

ion-datetime {
    color: var(--ion-color-light) !important;
}

【讨论】：

【解决方案2】：

当 Ionic 元素上没有定义 CSS 变量时，您可以简单地使用普通的 CSS 声明：

ion-datetime {
    color: #f90;
}

这可以在单个组件的 CSS 文件中完成，也可以在全局范围内完成，以针对整个应用程序中的所有 ion-datetime。

更新

定位占位符而不影响值：

ion-datetime {
  --placeholder-color: #0f9;
}

&:not(.datetime-placeholder) {
  color: #f00;
}

【讨论】：

this change also the placeholder colors, but I need to change only the value color, when the input is selected.