Material ui v5 Appbar theme changes when dialog is opened

user_7035886 0
Viewed 241

I have a basic layout with an AppBar, Drawer and the page content Inside the content i have a Dialog that will open when a user clicks on a button.

enter image description here

Once the dialog is open, the AppBar color changes to white

enter image description here

All of the code is copied straight from the material ui page, no customization has been done to it.

Does anybody know why this is happening or how to fix it ?


const AppBar = styled(MuiAppBar, {
  shouldForwardProp: (prop) => prop !== 'open',
})<AppBarProps>(({ theme, open }) => ({
  zIndex: theme.zIndex.drawer + 1,
  transition: theme.transitions.create(['width', 'margin'], {
    easing: theme.transitions.easing.sharp,
    duration: theme.transitions.duration.leavingScreen,
  }),
  ...(open && {
    marginLeft: drawerWidth,
    width: `calc(100% - ${drawerWidth}px)`,
    transition: theme.transitions.create(['width', 'margin'], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.enteringScreen,
    }),
  }),
}));

() => (
<AppBar position="fixed" open={open}>
        <Toolbar>
          <Box
            display="flex"
            justifyContent="space-between"
            alignItems="center"
            width="100%"
          >
            <Box display="flex" alignItems="center">
              {showSidebar && (
                <IconButton
                  color="inherit"
                  aria-label="open drawer"
                  onClick={handleDrawerOpen}
                  edge="start"
                  sx={{
                    marginRight: '36px',
                    ...(open && { display: 'none' }),
                  }}
                >
                  <MenuIcon />
                </IconButton>
              )}
              <Typography
                variant="h6"
                noWrap
                component={Link}
                to={AppRoute.home}
              >
                Title
              </Typography>
            </Box>
            <Box>
              <Button component={Link} to={AppRoute.login} color="inherit">
                Login
              </Button>
            </Box>
          </Box>
        </Toolbar>
      </AppBar>
);


// createTheme file


const createBaseTheme = (isDarkMode: boolean): Theme =>
  createTheme({
    palette: {
      mode: isDarkMode ? 'dark' : 'light',
      primary: { main: '#2c3e50', light: '#34495e', dark: '#2c3e50' },
      secondary: { main: '#2980b9', light: '#3498db' },
      tertiary: { main: '#8e44ad' },
      warning: { main: '#f39c12' },
      error: { main: '#e74c3c' },
      divider: 'rgb(255,255,255,0.2)',
      shade,
    },
  });

export default createBaseTheme;

I have tried setting the AppBar background color by hand to the theme primary main color. Still the same result.

material-ui typescript reactjs
1 Answers

Still didnt find out what the origin of the problem is, but i solved it by overwriting the theme and setting the appbar root background color the the theme color and added !important to the end. This seemed to fix the issue for now.


const createBaseTheme = (isDarkMode: boolean): Theme =>
  createTheme({
    palette: {
      mode: isDarkMode ? 'dark' : 'light',
      primary: { main: '#2c3e50', light: '#34495e', dark: '#2c3e50' },
      secondary: { main: '#2980b9', light: '#3498db' },
      tertiary: { main: '#8e44ad' },
      warning: { main: '#f39c12' },
      error: { main: '#e74c3c' },
      divider: 'rgb(255,255,255,0.2)',
      shade,
    },
    components: {
      MuiAppBar: {
        styleOverrides: {
          root: {
            background: '#2c3e50 !important',
            color: 'white !important',
          },
        },
      },
    },
  });
user_70358860
Related