Customize AppBar styling in Material UI React App

How to add custom styling to the material UI AppBar component in our React JS App. Material UI package is very useful for easily building beautiful UI components. These components come with a default styling and they can be overridden by our custom style.

Let’s check out how to customize the default style of the app bar by using an example. In the below example we are creating a sample header using AppBar. And as part of customizing we gonna change the color and height of the header.

Default Style of AppBar

AppBar Style Customization Code

Header.jsx

import { AppBar, Toolbar, makeStyles } from "@material-ui/core";

const useStyle = makeStyles({
  header: {
    background: "#2874f0",
    height: 55,
  },
});

const Header = () => {
  const classes = useStyle();

  return (
    <AppBar className={classes.header}>
      <Toolbar></Toolbar>
    </AppBar>
  );
};

export default Header;

Customized Material UI AppBar Style Output