如何确保跳转其他页面返回首页时AppBar导航栏颜色不变化

问题原因 #

你使用行内style属性给MUI的AppBar设置背景色时，路由跳转后页面重渲染，MUI组件内置的默认样式优先级高于行内样式，导致你设置的#00428b色值被覆盖。

解决方法 #

把背景色配置移到MUI专属的sx属性中即可，sx属性的样式优先级高于组件默认样式和普通行内样式，能保证你的自定义色值不会被覆盖。如果仍有优先级冲突，可加上!important强制生效。

修改后的代码参考：

<Box sx={{ flexGrow: 1 }}>
  <AppBar 
    position="static" 
    sx={{ backgroundColor: "#00428b" }}
  >
    <Toolbar>
      <Typography
        variant="body1"
        component="div"
        sx={{ flexGrow: 1 }}
      >
        Community League Financial Proficiency Self Assessment Tool
      </Typography>
      <Button
        variant="outlined"
        color="inherit"
        onClick={() => {
          userCtx.logout();
        }}
      >
        Logout
      </Button>
    </Toolbar>
  </AppBar>
</Box>

如果你的导航栏是多个页面公用的组件，建议直接将其抽为全局公共组件，避免每个页面单独渲染时重复计算样式，也能从根源避免样式不一致的问题。

内容的提问来源于stack exchange，提问作者shubham