时间戳

首页 > 解决方案 > 如何在 Primereact 中拥有主题切换器

reactjs - 如何在 Primereact 中拥有主题切换器

问题描述

我希望能够在 Primereact 中的主题之间切换，而不是导入一个主题，然后它会影响我的整个应用程序，而且我没有在暗模式或亮模式之间切换的选项。

标签： reactjsprimereact

解决方案

在网站www.primefaces.org/primereact/showcase/上观察他们是如何做到的，打开 Developer view: Elements，可以注意到选择不同的主题会改变 HTML 标头中的 css 文件链接：

<link id="theme-link" rel="stylesheet" href="./themes/bootstrap4-light-blue/theme.css">

变成

<link id="theme-link" rel="stylesheet" href="./themes/bootstrap4-light-purple/theme.css">

将链接元素 HREF 从一个切换到另一个是相当容易的。

本页讨论 primereact 主题切换： 在运行时在 Material、Bootstrap 和自定义主题之间切换您的 React 应用程序

但是它描述的方法太复杂了，涉及弹出和自定义 webpack，捆绑所有主题 CSS 文件并以编程方式导入它们，如下所示：

const changeTheme = (theme) => {
  import(`./${theme}.scss`).then((module) => {
    if (selectedThemeModule) {
      selectedThemeModule.unuse();
    }
    module.use();
    setSelectedThemeModule(module);
  });
}

相反，获取示例 repo，他们在其中执行链接 HREF 交换的方法：github.com/mertsincan/primereact-dynamic-theming/

example-1 有上面页面中卷积方法的代码，你可以跳过它并转到 example-2，这要简单得多。

简而言之，在 <header> 部分添加到“public/index.html”：

<link id="app-theme" rel="stylesheet" type="text/css" href="saga-blue.css">

并使用此功能：

const changeTheme = (theme) => {
  let themeLink = document.getElementById('app-theme');
  if (themeLink) {
    themeLink.href = theme + '.css';
  }
}

然后在changeTheme(XXX)点击主题 XXX 时调用。

接下来将 .css 文件放到正确的位置 - 只需将所有 node_modules/primereact/themes/*/theme.css 文件复制到公共文件夹中（给它们相应的主题名称）。一些 theme.css 参考字体 - 在每个文件中搜索“url”，如果存在，也复制相应的 fonts/ 目录。

我应该提到 example-1 的好处是使用缩小和捆绑的 CSS 文件，因此主题将更快地切换。如果这很重要，请按照上面链接的教程和示例 1 进行操作。另请注意，example-2 与 example-1 具有非常相似的设置（弹出和自定义 webpack 配置），但仅将 css 文件复制到正确的输出文件夹，可以跳过该文件夹以支持手动复制文件一次。

推荐阅读