css - 覆盖 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 使用 View 封装来防止样式从组件泄漏并影响应用程序的其余部分。这是通过使用 shadow-dom 实现的。您可以看到，当您检查任何元素时，您有一个类应用于您的类现在如何包含诸如 [_ngcontent-c0] 之类的内容。问题是您的样式也不会应用于子元素，即由组件的子组件创建的元素。通过使用 ::ng-deep(即 depricated)，您可以将样式应用于子元素。