在PrimeReact中实现主题切换器的方法如下:
import React, { useState } from 'react';
const ThemeSwitcher = () => {
const [theme, setTheme] = useState('light');
const handleThemeChange = (selectedTheme) => {
setTheme(selectedTheme);
};
return (
<div>
<label>
<input
type="radio"
value="light"
checked={theme === 'light'}
onChange={() => handleThemeChange('light')}
/>
Light Theme
</label>
<label>
<input
type="radio"
value="dark"
checked={theme === 'dark'}
onChange={() => handleThemeChange('dark')}
/>
Dark Theme
</label>
</div>
);
};
export default ThemeSwitcher;
import React from 'react';
import { Button } from 'primereact/button';
import ThemeSwitcher from './ThemeSwitcher';
const App = () => {
return (
<div>
<ThemeSwitcher />
<Button label="Button" className={`p-button-${theme}`} />
</div>
);
};
export default App;
在上面的示例中,我们使用了Button组件作为示例,根据当前选中的主题动态设置了按钮的样式类名。
这样,当用户在主题切换器中选择不同的主题时,按钮的样式将相应地改变。
请注意,这只是一个简单的示例,你可以根据自己的需求进行扩展和定制。另外,PrimeReact还提供了其他一些组件和工具,可以帮助你更好地实现主题切换功能。
更多关于PrimeReact的信息和文档,请参考腾讯云的相关产品和产品介绍链接地址。
领取专属 10元无门槛券
手把手带您无忧上云