覆盖 Kendo UI CSS答案

【问题标题】：Override Kendo UI CSS覆盖 Kendo UI CSS
【发布时间】：2018-08-15 22:22:17
【问题描述】：

我正在尝试为我的 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;
}

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

【问题讨论】：

标签： css angular kendo-ui

【解决方案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（即depricated），您可以将样式应用于子元素。

【讨论】：

感谢您的回复西蒙，我没有尝试您的解决方案，但我最终以不同的方式解决了问题，我会给您一个有用的答案，但不幸的是我不能，因为我没有足够的声誉，但我想知道我的解决方案和你的解决方案有什么区别，如果你知道，请告诉我。再次感谢！
啊，我明白为什么您的原始解决方案和我发布的解决方案都不起作用。在我们的任何一个选择器中，k-numerictextbox 或 k-numeric-wrap 之前都没有 .，但在您的工作解决方案中，您已经证明它实际上是一个类而不是元素 kendo-numerictextbox.k-numerictextbox（其中 kendo-numerictextbox 是元素和.k-numerictextbox 是一个类）。您可能只需在问题中将这些点添加到您的 css 中就可以了，但您的答案中的 css 更具体，通常更好。

【解决方案2】：

我找到了以下对我有用的解决方案：

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

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

*注意： .Settings 是我的包装类。

【讨论】：