如何解决用户登录时动态更新背景颜色,但当他退出时,背景颜色不会改变,但只会在重新加载时发生变化
这是我正在尝试做的代码片段。 currentUser 在用户登录或注销时更新。
interface StyleAppBar {
backgroundColor: string;
boxShadow: string;
}
const useStyles = makeStyles<Theme,StyleAppBar>((theme) =>
createStyles({
appBar: {
background: (muiProps) => muiProps.backgroundColor,boxShadow: (muiProps) => muiProps.boxShadow,},})
);
const Navbar: FC<NavbarProps> = (props) => {
const { currentUser,signOut } = props;
const muiProps = {
backgroundColor: currentUser ? 'white' : 'primary',boxShadow: currentUser ? 'none' : 'primary',};
const classes = useStyles(muiProps);
return (
<div>
<AppBar position="static" className={classes.appBar}>
我尝试的另一种实现是在用户退出时工作,颜色会按照代码中的指定变回。在实现中,我在 Navbar 组件内部定义了 useStyles,而不是在上面的组件中定义。虽然我觉得这可能不是正确的方法。请让我知道是否有其他有效的解决方法。 我正在使用 Material-UI、React、Redux-Observable、Firebase。 谢谢
解决方法
也许这个选项可以解决你的问题:
const useStyles = makeStyles(theme => ({
appBar1: {
background: 'white',boxShadow: 'none',},appBar2: {
background: 'primary',boxShadow: 'primary',}));
const Navbar: FC<NavbarProps> = (props) => {
const { currentUser,signOut } = props;
const classes = useStyles();
return (
<div>
<AppBar position="static" className={currentUser ? classes.appBar1 : classes.appBar2}>
...
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。