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

这是我要做的事情的代码片段。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}>

接口样式appbar{
背景颜色：字符串；
boxShadow：字符串；
}
const useStyles=makeStyles（（主题）=>
创建样式({
appBar：{
背景：（muiProps）=>muiProps.backgroundColor，
boxShadow：（muiProps）=>muiProps.boxShadow，
},
})
);
常量导航栏：FC=（道具）=>{
const{currentUser，signOut}=props；
常数muiProps={
背景颜色：当前用户？'white'：'primary'，
boxShadow:currentUser？'none'：'primary'，
};
常量类=使用样式（muiProps）；
返回(

我尝试的另一个实现与用户注销时一样工作，颜色正在按照代码中的规定更改。在该实现中，我在Navbar组件内部定义了useStyles，而不是在上面的组件外部定义了useStyles。尽管我觉得这可能不是正确的方法。请告诉我是否有其他有效的解决方法。 我使用的是材料界面、反应、可观察的重复使用、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}>   
    ...

const useStyles=makeStyles（主题=>({
appBar1：{
背景：“白色”，
boxShadow：“无”，
},
appBar2：{
背景：“主要”，
boxShadow:'主'，
},    
}));
常量导航栏：FC=（道具）=>{
const{currentUser，signOut}=props；
const classes=useStyles（）；
返回(
...

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

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

const useStyles=makeStyles（主题=>({
appBar1：{
背景：“白色”，
boxShadow：“无”，
},
appBar2：{
背景：“主要”，
boxShadow:'主'，
},    
}));
常量导航栏：FC=（道具）=>{
const{currentUser，signOut}=props；
const classes=useStyles（）；
返回(
...

此代码不足以帮助您，请尝试提供一个工作沙箱。当然，然后我将尝试提供一个沙箱，但我的问题是，我可以将

const useStyles=makeStyles（（主题）放入=>..

导航栏组件内部。这会产生问题吗？显然，这会产生问题。对我来说，从第一步开始，这不会影响所有组件。在您的实现中，您也遗漏了：基于道具进行调整：此代码不足以帮助您，请尝试提供一个工作沙盒。当然，然后我会尝试提供一个沙箱，但我的问题是，我是否可以将

const-useStyles=makeStyles（（主题）=>…

放入Navbar组件中。这会产生问题吗？显然，这会产生问题。对我来说，从第一步开始，这不会影响所有组件。在您的实现中，您也遗漏了：基于道具进行调整：