如何在组件内自定义Kendo ColorPicker清除按钮（非全局修改）

当然可以通过:host ::ng-deep实现你的需求，而且只会作用于当前组件，不会影响全局样式。具体操作分两步：

1. 把清除按钮文本改成“Reset” #

Kendo ColorPicker本身就提供了clearButtonText输入属性，直接在模板里配置就行，不用折腾样式：

<kendo-colorpicker [value]="selected" [clearButton]="true" clearButtonText="Reset"></kendo-colorpicker>

2. 移除清除按钮的高亮区域 #

用:host ::ng-deep定位到组件内部的清除按钮，覆盖它的hover、focus高亮样式：

:host ::ng-deep .k-colorpicker .k-clear-button {
  // 移除hover和focus时的高亮背景与阴影
  &:hover,
  &:focus {
    background-color: transparent;
    box-shadow: none;
    // 如果还有其他高亮样式（比如边框），按需添加重置规则就行
  }
}

补充说明 #

• :host 限定样式只作用于当前组件的宿主，搭配::ng-deep能穿透到Kendo组件内部DOM，但不会污染全局其他组件的样式。
• 用官方提供的clearButtonText改文本是最优解，比用样式篡改DOM内容靠谱多了，能避免后续Kendo版本更新导致样式失效。

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