1

我目前正在开发一个将 Kendo React UI 用于图表的应用程序，并且我想添加从 UI 中在明暗之间切换主题的可能性。

我使用 React 和 Sass 进行造型和两个不同的 Kendo-React 主题，浅色是默认的 kendo 制作，深色是我使用 Kendo Theme Builder 制作的。

我试图通过纯 scss 实现主题更改：


.light {
  @import '~@progress/kendo-theme-default/dist/all.scss'
}

.dark {
  @import 'path/to/custom/theme.scss'
}

并在这两个类之间改变状态变化。

我试过使用 scss @mixin：

具有主题样式的文件：


@mixin light {
...all properties and classes
}

应用程序.scss：


@import light;

.light {
  @include light
}

我尝试使用具有两个链接并仅使用正确链接的 react-helmet：


<div>
  <Helmet>
    <link rel={isDark ? "stylesheet" : "stylesheet alternate"} href="path/to/custom/theme.scss"/>
    <link rel={!isDark ? "stylesheet" : "stylesheet alternate"} href="path/to/default/kendo.scss"/>
  </Helmet>
</div>

或有一个指向正确 scss 文件路径的链接：


<div>
  <Helmet>
    <link rel="stylesheet" href={isDark ? "path/to/custom/theme.scss" : "path/to/kendo/default.scss}/>
  </Helmet>
</div>

我还尝试有条件地在 useEffect 中导入这些文件：


useEffect(()=>{
  if(isDark) require('path/to/custom/theme.scss')
  else require('path/to/kendo/theme.scss')
},[isDark]}

以上都没有奏效，有些没有进行任何更改，有些则将 UI 从空白页面更改为仅条形图系列的轮廓，没有任何颜色或样式。

显然，如果我尝试导入默认主题或我制作的主题而不尝试在运行时更改它，那么所有 2 都可以完美运行。

有人也遇到过这种情况吗？如何实现主题切换器？

4

0 回答 0