点击头部图标修改全局字体大小，Kendo UI Angular 4组件样式不生效求助

我明白你遇到的困扰了——明明给根元素加上了自定义类，Kendo组件的字体却纹丝不动。这其实是因为Kendo UI的组件样式优先级较高，而且很多组件的字体大小是直接定义在自身类选择器上的，不会自动继承根元素的样式。下面给你几个实用的解决方案：

方法一：使用CSS变量动态覆盖（推荐） #

这种方法灵活又易维护，通过定义全局CSS变量让Kendo组件的字体大小依赖它，点击图标时只需修改变量值就能实现全局调整：

1. 在styles.scss中修改样式：

@import "~@progress/kendo-theme-default/scss/all";

// 定义全局CSS变量，设置默认字体大小
:root {
  --kendo-base-font-size: 14px;
}

// 覆盖Kendo核心组件的字体大小，用变量代替固定值
.k-widget,
.k-input,
.k-button,
.k-grid-content .k-grid-cell,
.k-menu-item,
.k-tabstrip-items .k-item {
  font-size: var(--kendo-base-font-size);
}

// 针对特殊组件做微调（比如表格表头字体稍大一点）
.k-grid-header .k-grid-cell {
  font-size: calc(var(--kendo-base-font-size) + 2px);
}

2. 在组件类中添加点击事件处理逻辑：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  toggleFontSize() {
    const root = document.documentElement;
    const currentSize = root.style.getPropertyValue('--kendo-base-font-size');
    // 切换字体大小，比如在14px和20px之间切换
    const newSize = currentSize === '20px' ? '14px' : '20px';
    root.style.setProperty('--kendo-base-font-size', newSize);
  }
}

3. 在模板中给头部图标绑定点击事件：

<header>
  <span class="header-icon" (click)="toggleFontSize()">📝</span>
</header>

方法二：提高自定义类的样式优先级 #

如果你还是想用原来的类切换方式，需要让你的样式选择器比Kendo的更具体，这样才能覆盖默认样式：

在styles.scss中修改：

@import "~@progress/kendo-theme-default/scss/all";

.sample .k-widget,
.sample .k-input,
.sample .k-button,
.sample .k-grid-cell,
.sample .k-menu-link,
.sample .k-tabstrip-items .k-link {
  font-size: 40px !important;
}

通过.sample父类 + Kendo组件类的组合选择器，提升了样式优先级，确保根元素添加sample类后，这些样式能生效。不过这种方法需要你列举所有需要修改字体的Kendo组件类，相对繁琐。

方法三：动态切换自定义主题文件 #

如果需要更完整的主题字体调整（比如连标题、提示文本等所有元素都统一变化），可以预先用Kendo的Sass变量生成多套主题文件，然后点击时动态切换主题的CSS文件：

1. 新建两个主题文件，比如theme-default.scss和theme-large.scss：

// theme-default.scss
@import "~@progress/kendo-theme-default/scss/all";
$font-size: 14px;
// 覆盖Kendo的Sass变量
$kendo-font-size: $font-size;
$kendo-font-size-lg: $font-size + 2px;

// theme-large.scss
@import "~@progress/kendo-theme-default/scss/all";
$font-size: 20px;
$kendo-font-size: $font-size;
$kendo-font-size-lg: $font-size + 2px;

2. 将这两个文件编译成CSS（可以通过Angular CLI配置自动编译）。

3. 在组件中动态切换link标签的href：

toggleTheme() {
  const themeLink = document.getElementById('kendo-theme') as HTMLLinkElement;
  themeLink.href = themeLink.href.includes('theme-default.css') ? 'theme-large.css' : 'theme-default.css';
}

这种方法适合需要完整主题切换的场景，但配置起来稍复杂。

内容的提问来源于stack exchange，提问作者Srinu Merugu