How to customize AppBar in Material-UI?

If you are looking to learn Material-UI, the course is available at http://bit.ly/2SZDYyw

Welcome to today’s video on customizing the AppBar component in Material-UI This AppBar component is often used to convey your brand, to show the current screen name or to give a seamless navigation experience along with some action buttons. We will look at how can you add an AppBar to your app and customize its look and feel.

  • We will do so by changing the color of this app bar to any color you want.

  • You can also change the color of the text you write on this AppBar.

  • And I will show you how you can make this AppBar flat without any shadows that are baked into the theme.

Full Transcript

Hey! this is Deeksha from Bonsaiilabs and welcome to today’s video on customising the AppBar component in Material-UI. This AppBar component is often used for convey your brand, to show current screen name or to give a seamless navigation experience along with some action buttons. We will look at how can you add an AppBar to your app and customise its look and feel. We will do so by changing the color of this app bar to any color you want. You can also change the color of the text you write on this AppBar and I will show you how you can make this AppBar flat without any shadows that are baked in to the theme.

Let’s open code sandbox and create a React project. Add a Material-UI dependency and Material-UI icons dependency because we will use an icon on the AppBar. Alright! so now that we have the dependencies, we will remove this boilerplate code and this App component will instead return a div containing AppBar component from Material-UI library. We will keep the position sticky so that its relatively positioned. Now if you want to put certain number of components in your app header, then Material-UI also provides a ToolBar component which is a wrapper to place all the elements horizontally. So let’s add a <ToolBar> component. Inside this ToolBar, we want an IconButton component that can hold a MenuIcon. Just so that color of the icon is visible, we will provide the color prop with value inherit and a Typography Component with variant h6. This refers to heading6. We will add a label My Cool App and that’s it.

Now this resulting AppBar has the purple color coming from Material-Ui default theme. Its API gives you the color prop with a set of pre-defined values. You cannot use color prop to provide a color of your choice. You will need to customise the Material theme that comes with it. But if you want this AppBar in a different color without touching the existing theme, you can do that by providing the style prop and add the backgroundColor property to say, pink and it turned the color to pink. This white color of every element inside this AppBar is not really cool! and definitely not good for accessibility. So we we can change that by using color property inside the style to have black color. And there you go. The material icon and the text both are in black. Next, sometimes you need a flat AppBar with no shadows or depth. With Material-UI AppBar, what you can do is have this boxShadow property with value 0px and let the background color be transparent. And that ways you have this seamless AppBar with all sorts of customisations. Now you don’t want to use this inline styling here, which actually might not scale in complex projects. Their styling solution is pretty decent. You can pretty much link all the styles with a component using the Hook pattern. You can import makeStyles which is a function that takes as input 2 parameters. A styles object. It could also be a function if you need access to the theme. But here we are not using theme, so we will stick with the object. And copy all the styles we provided to AppBar, right here. makeStyles() returns a Hook which as per the convention we call it useStyles. We can call this hook to get the css classes right within this component. Since we want to apply those styles to <AppBar>, we will use className prop and with value classes.header. And its throwing error because by mistake we removed the import for Typography. So let’s put it back and there we go. So this is another way of customising the styling of your AppBar. That’s all I wanted to cover today. Thanks for watching and I will see you in the next video.