How to Change Material UI AppBar Color and Styling

Material-UI AppBar is a useful component for positioning titles, hamburger menus, admin buttons, and more. Styling the AppBar background color, text color, positioning, font, and any other CSS property is a common need and can be tricky to figure out.

This demo will show several methods for customizing the AppBar, with a particular focus on setting text and background color.

Code Sandbox link with full React code is in the Resources section.

Method 1: Styling AppBar With Classes

Material-UI has a built-in classes API for styling. Here’s an example of using that for styling AppBar background color and border:

The classes:

const useStyles = makeStyles((theme) => ({
  abRoot: {
    backgroundColor: "red"
  },
  abStatic: {
    border: "solid blue 2px"
  }
})
);

And the JSX:

<AppBar 
  position="static"
  style={{ borderRadius: "80px" }}
  classes={{ 
    root: classes.abRoot, 
    positionStatic: classes.abStatic 
  }}
>

The classes API abstracts away from the DOM and the actual classes names on the elements. It is fairly powerful and usually accomplishes the goal.

To get the full list of targetable classes, see the docs here. The docs also list the names of the classes as they are actually found in the DOM, which will be used in method two.

Here’s how to use AppBar with the Drawer component nested underneath, and here’s how to style the MUI Drawer. The AppBar also works well for containing the Tab component.

Method 2: Overriding AppBar Styles With Global Class Name (and Adding Sticky Position)

Material-UI’s global class name system allows precise targeting of components. In this AppBar example, the AppBar wraps a Toolbar. I target the Toolbar only when the AppBar has a global class of “sticky” in the JSS below. “Sticky” is applied by the position prop.

const StyledAppBar = withStyles((theme) => ({
  root: {
    backgroundColor: theme.palette.secondary.light,
    "&.MuiAppBar-positionSticky": {
      margin: "40px 20px 0px 20px",
      width: "calc(100% - 40px)",
      "& .MuiToolbar-root": {
        color: "green",
        "& .MuiButtonBase-root": {
          fontSize: 24
        }
      }
    }
  }
}))(AppBar);

Furthermore, I precisely target Button components within the Toolbar and update fontSize.

In the DOM, notice the .MuiAppBar-positionSticky in the header, .MuiToolbar-root in the first div, and .MuiButtonBase-root in the buttons. Notice in the withStyles code if there is a space between the & and the ., that tells the selector its looking for a child component. If there is no space, like &.MuiAppBar-positionSticky, then it is not looking for a child (the AppBar-root and the MuiAppBar-positionSticky are applied to the same element).

This method also keeps the JSX very clean.

return (
  <StyledAppBar position="sticky" color={"secondary"} elevation={6}>
    //Children Toolbar and buttons
  </StyledAppBar>
);

Notice also that I add box shadow via the elevation prop. Elevation is available on many components in Material-UI, even when it is not stated in the API docs.

Take a look at the live demo in the Code Sandbox below. Notice how the sticky header works…simply add the prop mentioned above, and the AppBar is fixed to the top of the viewport.

Also, I added margin to the left and right. However, it wasn’t as simple as ‘just’ setting margin. By default, AppBar has width: 100%. I had to override this width in the .MuiAppBar-positionSticky selector and add width: "calc(100% - 40px)". This is a calculation that ensures there is ‘room’ for the margin. Otherwise, adding margin simply kicks the AppBar over.

Finally, I swapped the menu icon out for a logo. If you want to add a logo to the AppBar, a simple way to do it is to place the logo as the first child in the Toolbar, which is in the AppBar.

Method 3: Styling AppBar with Custom Theming

Custom theming in Material-UI is simply the modification of the existing theme palette to use whatever colors you specify. In our case:

const customTheme = createMuiTheme({
  palette: {
    secondary: {
      main: "#F5BD1F",
      contrastText: "#6a0dad "
    }
  }
});

This method changes the AppBar background color without any specific targeting of the background CSS property. Same goes for the text color. Instead, AppBar is built to use the main and contrastText colors of whatever color scheme is chosen in the color prop (in this case, secondary).

And the JSX:

return (
  <ThemeProvider theme={customTheme}>
    <AppBar position="static" color={"secondary"}>
      //...Toolbar, etc
    </AppBar>
  </ThemeProvider>
);

Don’t forget to wrap AppBar in your ThemeProvider, and to pass in the customTheme const. Note that any children inside AppBar will be affected by the custom theme.

Also, make sure you don’t wrap additional components that you don’t want to have the customTheme.

Resources

Here’s how to customize AppBar height and z-index.

Test your JavaScript knowledge with these 50 challenging interview questions!

View Code Sandbox Here.

(My Codesandbox is a fork from this demo in the docs.)

MUI AppBar Docs:

https://material-ui.com/api/app-bar/
https://material-ui.com/components/app-bar/