覆盖 Kendo UI CSS

Question

我试图为我的 Kendo UI 数字框提供圆边，但我无法覆盖 CSS，我可以在浏览器调试器中执行此操作并手动更改border-radius，我的 CSS 代码如下：

k-numerictextbox k-numeric-wrap {
 border-radius: 10px !important;
}

k-numerictextbox k-numeric-wrap k-select {
 border-radius: 0 10px 10px 0 !important;
}

任何想法都会有帮助，谢谢。

Answer 1

简答

您需要使用::ng-deep：

::ng-deep .k-numerictextbox .k-numeric-wrap {
    border-radius: 10px !important;
}

::ng-deep .k-numerictextbox .k-numeric-wrap .k-select {
    border-radius: 0 10px 10px 0 !important;
}

解释

Angular 使用视图封装来防止样式从组件中泄漏并影响应用程序的其余部分。这是通过使用 Shadow-dom 来实现的。您可以看到，当您检查任何元素时，您都有一个类应用于您的类现在如何包含诸如[_ngcontent-c0]. 问题是您的样式也不会应用于子元素，即由组件的子组件创建的元素。通过使用::ng-deep（已废弃），您可以将样式应用到子元素。