当用户登录时动态更新背景颜色，但当他注销时，背景颜色不会改变，只会在重新加载时改变

Question

这是我要执行的操作的代码片段。 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。谢谢

Answer 1

也许这个选项可以解决您的问题：

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}>   
    ...

当用户登录时动态更新背景颜色，但当他注销时，背景颜色不会改变，只会在重新加载时改变

Dynamically updating background color when user signs in but when he sign out,the background color does not changes but only on reload

reactjs

firebase

react-hooks

material-ui

redux-observable