Kendo UI Angular 4组件覆盖样式

Question

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

我尝试从@import "~@progress/kendo-theme-default/scss/all";添加styles.scss @import "~@progress/kendo-theme-default/scss/all"; 与.sample { font-size: 40px; } .sample { font-size: 40px; }和追加sample类的页面的主体元件：

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

当我检查它时，我可以看到样式示例添加到根元素但是我没有看到Kendo UI组件中的任何字体更改...有人可以对此有所了解吗？

对任何回复都非常感谢。

Answer 1

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

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

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

尝试这个：

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

供参考：

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

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

ps此设置将对所有元素应用相同的字体大小，无论它们在何处。 我不确定这是你在申请中真正想要的......

Answer 2

这可以很容易地在主题级别完成！ Angular的Kendo UI设置为使用Sass变量来自定义主题的各个方面，包括$font-size变量。 这是所有可用主题的列表：

• 默认
• Bootstrap （默认情况下也继承自Bootstrap v4）
• 材料

从上面的链接可以看出，每个主题都有一个$font-size变量，您可以自定义该变量以满足您的应用程序需求。

注意：这种自定义必须通过webpack或主题本身的构建过程生成新的CSS， 如此处所述 。

如果您希望在用户从下拉列表中选择一个值时动态更新它，这可能会有点棘手。 我不是100％意识到最好的方法，但是毯子* { ... !important; } * { ... !important; }可能会工作（虽然我总是谨慎的，当我看到这一点）。 也许根据字体大小更换多个样式表可能有用吗？ 另一种方法是使用一个函数来更新页面上元素的CSS样式，包括Kendo UI组件。 此时，您必须找出哪些CSS类适用于页面上的小部件并相应地进行调整。