使用Switch和withStyles()动态更改主题的调色板类型(暗/亮)可以通过以下步骤实现:
import React, { useState } from 'react';
import { Switch } from '@material-ui/core';
import { withStyles } from '@material-ui/core/styles';
const ThemeSwitcher = () => {
const [darkTheme, setDarkTheme] = useState(false);
// 其他代码...
}
const styles = {
switchContainer: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
marginTop: '20px',
},
};
const StyledSwitch = withStyles(styles)(Switch);
const handleThemeChange = () => {
setDarkTheme(!darkTheme);
};
return (
<div>
<div className={classes.switchContainer}>
<StyledSwitch checked={darkTheme} onChange={handleThemeChange} />
</div>
{/* 其他代码... */}
</div>
);
const theme = createMuiTheme({
palette: {
type: darkTheme ? 'dark' : 'light',
// 其他调色板配置...
},
});
import { ThemeProvider } from '@material-ui/core/styles';
const App = () => {
return (
<ThemeProvider theme={theme}>
{/* 应用的其他组件... */}
</ThemeProvider>
);
};
通过以上步骤,你可以使用Switch和withStyles()动态更改主题的调色板类型(暗/亮)。当切换按钮的状态改变时,主题类型将相应地更新,并应用到整个应用程序中。这样,你就可以实现动态更改主题的功能。
注意:以上代码示例中的createMuiTheme()函数是Material-UI库提供的用于创建主题的函数。你可以根据自己的需求进行调整和扩展。
领取专属 10元无门槛券
手把手带您无忧上云