Original subtitles

Under the menu list composition it exposes a little bit more of a advanced technique to use the underlying

menu list and Popper components which the menu component is built on top of two more customize the look

and feel of your menus.

So here you can see the menu is coming straight out of the bottom here and leaving the underlying button

exposed.

So this example is a lot more technically advanced but I do really like the end look of this feature

and so I don't want to jump into it right now but I think that we might come back to this maybe as a

bonus video in the end of the course and to see if we can't improve our menu even further using the

menu list composition they show you examples of how to customize your menus as you can see here with

icons and you can see different selection background color and we're going to be going into customizing

our menu pretty extensively but you can see here just to take a look at the way that they're able to

do this is by when they set up the menu up here.

Actually they use a styled component syntax here to create a specifically styled version of the menu

item component.

But essentially they are setting the background color here whenever the menu icon receives focus.

So whenever it is selected or clicked on they also change the text color inside of this.

And here you can see an example of the JSF s cascading selectors where they are nesting and this call

to any list item icon underneath a focused menu item.

So any list item icon inside of a selected menu icon will then have the text color set to white.

This is a pretty powerful example of what J SS is capable of and another way of how it makes styling

more convenient in our applications.

Now if you want to know where these classes are coming from so how do they know to specify the M UI

list item icon route.

That is a specific class provided by a material UI for us to override or customize any of the default

material UI component styles.

If you scroll to the bottom of the page here you can see this API section and this shows you all of

the components they are used to build the menu component and all of the specific details of each one

so if we come to the menu API you can scroll down and it shows you an example of all of the props that

can be provided to the menu component as well as all their defaults and what all of the props do below

that they have down here.

These are the classes that you can use to override any of their default styles.

So here you see the UI menu list and you could use that to overwrite these styles for the list component

within any menu component and you can see here that the material UI components are sometimes composed

of other components.

And so you use this styling system here.

The list rule name in the paper rule name.

You can use those specifically to apply styles to any of these specific underlying material UI components.

This allows you another layer of control over these styling and behavior of your application as well

as providing a system for centralizing this using the overrides property in the default theme.

So here you can see an example of on our theme object if we were to provide outside of the palette and

outside of the typography options and override options you can then select the material or UI class

that you want to style for a specific component and specify the overriding styles underneath then anytime

you use one of those specific components they will already have the overridden styles so let me just

go back over to the menu API screen and let's go back again to the actual menu components and there

was one last thing I wanted to take a look at here and that is the change transition.

And so here they provide a way for you to change how your menu is displayed.

And so here you can see a fade transition as opposed to the grow transition.

I believe these are using this right here also is showing that your menus can be scrolled of course

which is a nice extra little functionality that you can add.

And again you can just see this is a very verbose component designed to provide the base functionality

necessary while providing these systems to be customized as extensively as necessary.

I know that may have seemed like there was kind of a lot of code going on there but it really isn't

too bad and I think that once we set up our own example it really make sense to you guys.

So let's go ahead and get started doing that in the next video.