Kendo React UI如何实现亮/暗色主题切换，现有尝试方案均未生效

失效原因说明 #

你尝试的几种方案失效核心有三个原因：

1. Kendo React主题的SCSS需要编译为纯CSS才能被浏览器识别，直接引用SCSS文件不会生效
2. 两套主题样式同时打入打包产物会出现全局样式覆盖、优先级错乱，无法正常切换
3. Kendo 图表等组件的填充色、描边等样式是JS逻辑生成的内联样式，仅切换CSS不会同步这部分配置，就会出现只有轮廓没有填充色的问题

可行实现方案 #

步骤1：独立编译两套主题为CSS文件

不要嵌套父类、不要用mixin封装，将亮色、暗色主题分别独立编译为单独的CSS文件，避免变量和样式冲突。
可以直接用sass命令行编译，也可以在打包工具中配置额外的样式编译入口：

# 编译官方亮色主题
sass node_modules/@progress/kendo-theme-default/dist/all.scss public/kendo-light.css
# 编译自定义暗色主题
sass 你的自定义主题scss路径 public/kendo-dark.css

步骤2：运行时动态切换CSS资源

不要用require、不要用alternate样式表，直接操作DOM动态修改主题CSS的加载地址，确保同一时间只有一套主题CSS生效：

import { useState, useEffect } from 'react';
// 导入两套主题对应的图表配置，用于同步JS生成的内联样式
import kendoLightChartTheme from '@progress/kendo-theme-default/dist/json/chart.json';
import kendoDarkChartTheme from '你导出的自定义暗色主题chart.json路径';

function App() {
  const [isDark, setIsDark] = useState(false);

  // 切换主题CSS
  useEffect(() => {
    let themeLink = document.getElementById('kendo-theme-link');
    const targetHref = isDark ? '/kendo-dark.css' : '/kendo-light.css';

    if (!themeLink) {
      themeLink = document.createElement('link');
      themeLink.id = 'kendo-theme-link';
      themeLink.rel = 'stylesheet';
      document.head.appendChild(themeLink);
    }

    themeLink.href = targetHref;
  }, [isDark]);

  return (
    <div>
      <button onClick={() => setIsDark(prev => !prev)}>切换亮/暗色主题</button>
      {/* 图表组件同步传入对应主题配置，解决内联样式不更新的问题 */}
      <Chart
        theme={isDark ? kendoDarkChartTheme : kendoLightChartTheme}
        {/* 其他图表配置 */}
      />
      {/* 其他Kendo组件不需要额外传配置，CSS切换后自动生效 */}
    </div>
  )
}

补充说明

如果你的自定义暗色主题是通过Kendo Theme Builder生成的，可以直接导出对应的组件主题JSON文件，和CSS放在一起引用即可。除了图表外，其他纯CSS渲染的Kendo组件不需要额外传入theme属性，CSS加载完成后自动适配样式。

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