当我们点击标题中的图标时，我需要更改整个应用程序的字体大小。我正在使用所有Kendo组件。
我尝试使用styles.scss从@import "~@progress/kendo-theme-default/scss/all";添加.sample { font-size: 40px; }并将sample类附加到页面的body元素：
<div [ngClass]="{sample: (boolVar == true)}">
当我检查它时，我可以看到样式示例添加到根元素但是我看不到Kendo UI组件中的任何字体更改...有人可以对此有所了解吗？
非常感谢任何回应。
答案 0 :(得分：2)
要覆盖元素中的样式，首先需要将!important标志添加到样式中。
此外，要使这种样式渗透到Angular组件中，您需要使用/deep/。
您还需要添加通配符选择器*以将样式应用于.sample下的所有元素。
试试这个：
/deep/ .sample * { font-size: 40px !important; }
的供参考：
/deep/应该在某个时候用更好的解决方案替换。与此同时，这是唯一可用的选项。
如果在某个元素上已经存在font-size标记的!important样式，则您的样式将被覆盖。
附：此设置将对所有元素应用相同的字体大小，无论它们在何处。我不确定你在申请中真正想要的是什么......
答案 1 :(得分：0)
这可以很容易地在主题级别完成！ Angular的Kendo UI设置为使用Sass变量来自定义主题的各个方面，包括$font-size变量。以下是所有可用主题的列表：
从上面的链接可以看出，每个主题都有一个$font-size变量，您可以自定义该变量以满足您的应用需求。
注意：这种自定义必须通过webpack或主题本身as mentioned here的构建过程生成新的CSS。
如果您希望在用户从下拉列表中选择一个值时动态更新并动态更新，这可能会有点棘手。我不是100％意识到最好的方法，但毯子* { ... !important; }可能会起作用（虽然我看到这个时总是很谨慎）。也许根据字体大小更换多个样式表可能有用吗？另一种方法是使用一个函数来更新页面上元素的CSS样式，包括Kendo UI组件。此时，您必须找出哪些CSS类适用于页面上的小部件并相应地进行调整。