如何修改Kendo UI Timepicker组件选中高亮区域的文本颜色

解决方案 #

你修改.k-time-highlight类仅背景色生效的原因是：该类对应的元素只是高亮效果的背景层，实际时间文本承载在选中状态的列表项元素上，文本样式优先级高于背景层设置的文字颜色，因此修改不生效。

你可以使用以下CSS规则实现高亮文本变红的效果：

1. 如果是在全局样式文件中添加，直接写入以下代码即可：

/* 匹配时间选择器弹窗内选中的列表项，修改文本颜色 */
.k-time-popup .k-list .k-item.k-selected {
  color: red;
}
/* 可同时自定义高亮背景色，保留你之前的修改即可 */
.k-time-highlight {
  background-color: #e0e0e0; /* 示例背景色，可自行替换 */
}

2. 如果是在Angular组件的样式文件中添加，需要打开样式穿透避免组件封装屏蔽规则：

::ng-deep .k-time-popup .k-list .k-item.k-selected {
  color: red;
}

如果规则仍然不生效，可以在选择器前添加你自己业务页面的外层类名提高CSS优先级，无需加!important也能覆盖默认样式。

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