自定义kendo-colorpicker中的清除按钮

Question

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

我想删除突出显示的部分并显示 重置 文本。我们怎样才能做到这一点。我不想使用 ::ng-deep。我们可以使用 :host ::ng-deep 来实现这一点吗？在我的应用程序中，我在组件中使用它，并且我不想在 styles.scss 中添加全局更改或使用 ::ng-deep

Answer 1

我们可以使用下面的CSS，我们还需要结合我之前的答案中提供的修复将kendo-colorpicker的kendo弹出窗口附加到“组件”

:host ::ng-deep .k-coloreditor-reset kendo-icon-wrapper{ 
    display: none !important; 
}

    :host ::ng-deep .k-coloreditor-reset {
        width: 75px;
        position: relative;
    }

    :host ::ng-deep .k-coloreditor-reset::before {
        content: 'Reset All';
        position: absolute;
        left: 10px;
        top:5px;
        height: 30px;
        width: 50px;
        z-index: 300000000;
        opacity: 1;
        background-color: transparent;
    }

Stackblitz 演示