angular - Kendo UI Angular 4 组件覆盖样式

Question

我需要在单击标题中的图标时更改整个应用程序的字体大小。我正在使用所有 Kendo 组件。

我尝试从 @import "~@progress/kendo-theme-default/scss/all"; 添加 styles.scss 和 .sample { font -尺寸:40px； } 并将 sample 类附加到页面的 body 元素:

<div [ngClass]="{sample: (boolVar == true)}">

当我检查它时，我可以看到添加到根元素的样式示例，但我没有看到 Kendo UI 组件中的任何字体更改...有人可以阐明这一点吗？

非常感谢任何回复。

Answer 1

要覆盖元素中的样式，您首先需要将 !important 标志添加到样式中。

此外，要使这种样式渗透到 Angular 组件中，您需要使用 /deep/。

您还需要添加通配符选择器* 以将样式应用于.sample 下的所有元素。

试试这个:

/deep/ .sample * { font-size: 40px !important; }

仅供引用:

1. /deep/ 应该在某个时候用更好的解决方案替换。同时，这是唯一可用的选项。

2. 如果在某些元素上已经存在带有 !important 标志的 font-size 样式，您的样式将被它覆盖。

附:此设置将对所有元素应用相同的字体大小，无论它们在哪里。我不确定这是否是您在应用程序中真正想要的...