当我们单击标题中的图标时，我需要更改整个应用程序的字体大小。我正在使用所有剑道组件。
我尝试从@import "~@progress/kendo-theme-default/scss/all"; 中添加styles.scss 和.sample { font-size: 40px; }，并将sample 类附加到页面的正文元素：
<div [ngClass]="{sample: (boolVar == true)}">
当我检查它时，我可以看到添加到根元素的样式示例，但我没有看到 Kendo UI 组件中的任何字体更改...有人可以对此有所了解吗？
非常感谢您的任何回复。
【问题讨论】：
要覆盖元素中的样式，您首先需要将!important 标志添加到您的样式中。
此外，要使这种样式渗透到 Angular 组件中，您需要使用 /deep/。
您还需要添加通配符选择器* 以将样式应用于.sample 下的所有元素。
试试这个：
/deep/ .sample * { font-size: 40px !important; }
仅供参考：
/deep/ 有时应更换为更好的解决方案。同时，这是唯一可用的选项。
如果某个元素上已经存在带有!important 标志的font-size 样式，则您的样式将被它覆盖。
p.s.此设置将对所有元素应用相同的字体大小，无论它们在哪里。我不确定这是否是您真正想要的应用程序...
【讨论】：
/deep/ 应该在某个时候被替换。但是，使用::ng-deep 并没有那么好，因为它也已被弃用，并且将与/deep/ 一起被丢弃。 Angular 团队确实建议使用 ::ng-deep 以获得“与工具的更广泛兼容性”，但他们会在某些时候同时删除 /deep/ 及其别名 >>> 和 ::ng-deep。
这可以很容易地在主题级别上完成！ Angular 的 Kendo UI 设置为使用 Sass 变量来自定义主题的各个方面，包括 $font-size 变量。以下是所有可用主题的列表：
从上面的链接可以看出，每个主题都有一个 $font-size 变量，您可以自定义该变量以满足您的应用程序需求。
注意：这种自定义必须通过 webpack 或主题本身的构建过程生成新的 CSS as mentioned here。
如果您希望在用户从下拉列表中选择一个值时动态更新它，这可能有点棘手。我不是 100% 知道最好的方法，但毯子 * { ... !important; } 可能会起作用（尽管当我看到这个时我总是很谨慎）。也许根据字体大小换出多个样式表可能会起作用？另一种选择是拥有一个更新页面上元素的 CSS 样式的功能，包括 Kendo UI 组件。此时，您必须找出哪些 CSS 类适用于您页面上的小部件并相应地调整它们。
【讨论】：