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

Answer 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是我的包装器类。

覆盖Kendo UI CSS

2 个答案: