一个人怎么能在primereact中有一个主题切换程序呢

Question

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

Answer 1

在网站www.primefaces.org/primereact/showce/上观察他们是如何做到这一点的，打开开发者视图：元素，可以注意到选择不同的主题会改变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主题切换：在运行时中在材料、引导和自定义主题之间切换React应用程序

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

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

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

示例-1有上面页面中复杂方法的代码，您可以跳过它，转到示例-2，这要简单得多。

简而言之，在<页眉>区段：

<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/primreact/themes/*/theme.css文件复制到公共文件夹中(为它们提供相应的主题名称(。一些主题.css参考字体-搜索"url"；在每个文件中，如果存在，也复制相应的字体/目录。

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

Answer 2

有一种更简单的方法他们确实在文档中对此进行了一些解释，但在文档中并不是复制粘贴

以下是我在React应用程序中所做的：

这在我的index.html文件中定义一个带有id的元素，以便稍后在代码中引用，它们还可以href到样式所在的目录。

<link id="app-theme" rel="stylesheet" href="/themes/lara-dark-blue/theme.css">

样式应该从prime react的node_modules复制从劳拉复制黑暗和光明的主题

cp -r ./node_modules/primereact/resources/themes/lara-light-blue ./public/themes/lara-light-blue
cp -r ./node_modules/primereact/resources/themes/lara-dark-blue ./public/themes/lara-dark-blue

您也可以直接拖放它们，但终端也很好；(

现在在您的React组件中，从api目录导入PrimeAreact，然后使用changeTheme实用程序函数将从暗变为亮，反之亦然

import PrimeReact from 'primereact/api';
function App() {
const [theme, setTheme] = useState('dark');
const changeMyTheme = () => {
const newTheme = theme === 'dark' ? 'light' : 'dark';
PrimeReact?.changeTheme?.(`lara-${theme}-blue`, `lara-${newTheme}-blue`, 'app-theme', () =>
setTheme(newTheme)
);
};
return (
<div>
<header>
<button
className={`p-2 rounded ${theme === 'dark' ? 'bg-gray-100 text-black' : 'bg-gray-700 text-white'}`}
onClick={() => changeMyTheme()}
>
<span className={`pr-1 pi pi-${theme === 'dark' ? 'sun' : 'moon'}`}></span>
Change Theme
</button>
</header>
</div>
);
}

如果您需要参考更多详细信息以及其他可用主题，请参阅以下文档https://primereact.org/theming/