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
And I will show you how you can make this
AppBarflat without any shadows that are baked into the theme.
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
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
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
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
AppBar. That’s all I wanted to cover today. Thanks for watching and I will see you in the next video.