如何在 primereact 中拥有主题切换器

Question

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

Answer 1

观察他们在网站 www.primefaces.org/primereact/showcase/ 上的做法，打开 Developer 视图：Elements，可以注意到选择不同的主题会更改 css 文件 link in [=52] =] header:

<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">

将 link 元素 HREF 从一个元素切换到另一个元素相当容易。

本页讨论 primereact 主题切换： Switch Your React App Between Material, Bootstrap and Custom Themes at Runtime

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

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

取而代之的是，获取他们执行 link HREF 交换方法的示例回购：github.com/mertsincan/primereact-dynamic-theming/

example-1有上面页面的复杂方法的代码，你可以跳过它转到example-2，这样就简单多了。

简而言之，添加到 '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';
  }
}

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

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

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

如何在 primereact 中拥有主题切换器

How can one have a theme switcher in primereact

reactjs

primereact