All language subtitles for 12. Styling - Inline

By now we should be getting pretty familiar with the material UI theming system and what the default

theme provides for us but what about when you don't actually need a theme.

You're not trying to change all of the types of components across your application but you just want

to apply styling to one component within your application.

Well that is exactly what inline styling is and material UI provides a great system for doing this.

The ties into the theming system so let's go take a look at how we can get started with inline styles

and then we're going to use that to finally fix that margin problem with our app a bar that is covering

up our little Hello underneath it here on the material UI documentation page you can see under the styles

tab and then we're on the basics if you scroll down here to where it says getting started it shows you

a simple example of how it's using inline styles to create this little button right here.

So if you walk through it you'll notice the first to it after importing react imports this make styles

from material UI styles and then imports the button from the material UI core and it uses that make

styles import which is actually a function which we pass our styles in.

J SS as an object inside this object you'll notice the a lot of the properties are going to be extremely

familiar to you because J SS is essentially exactly the same as a C Ss with only a few functionality

differences but the main difference being that these styles instead of being border dash radius you

see that it's border radius in camel case with the capital R.

So all you really need to remember is that all the CSF properties that you're used to you're just going

to need to kind of squish them together into this format for J SS Another difference is that we do have

to put our strings in quotations.

We can't just put the word white right there or the hexadecimal color.

We have to actually put that in the quotes as well.

Unlike CSX.

So those are a few differences but besides that you'll find it almost identical to rail or CSX when

you are including your properties in J SS then we save this makes Dale's call with our style object

here to the use styles constant then down in our functional component.

Here we call use styles as a function since it's a hook actually which now gives us access to these

styles under our classes and constant by the time our components are actually rendered.

This J SS is compiled into actual C Ss and so having it here on the classes constant lets us just access

this classes dot root class name you see this syntax we set our class name equal to classes dot root

so classes being this constant here and Dot root because that is the style that we specified here.

So make styles generates our styles and then use styles gives us access to them on our classes.

Constant.

So now we understand how to set up our J SS styles and then get access to them within our component.

Let's go ahead and go into our code editor and see if we can't get this hooked up so here in our header

component.

I'm going to go up to the top and I'm going to import and we're going to d structure this out and that's

the make styles hook make styles from app material dash UI slash styles then we can come down here and

create our constant of use styles and set that equal to our Make styles.

And here we're actually going to use a slightly different syntax than the documentation example which

is going to give us access to the theme inside of our styles.

We'll need a property from the theme to fix our problem with the header sitting on top of our Hello

text so here we'll pull out the theme and begin an arrow function with parentheses.

And then our object in this first style that I want to create I'm going to call the class toolbar margin

and then we'll open this up and inside of here we're going to use the spread operator to copy over some

properties out of our theme the property that we want specifically is theme dot mix ins dot toolbar.

Now to show you what that's doing here let's actually head on over back to the material UI documentation

and come down here to customization and go back to the default theme.

And here you can see the mix ins object.

So I'm going to open that up.

And here you can see the toolbar object that we just referenced inside of there.

You'll see we just have a couple properties first being the mean height of 56 and then a couple of these

media queries which each have a different height by using the spread operator.

We have now copied all of these styles over to where we can now apply them to a component or in this

case actually just a regular h t AML element.

So what we're going to do is go back onto the code and first we need to come right underneath the header

function above the return statement and create our concept classes which is equal to calling our use

styles hook this now gives us access to the tool margin toolbar margin style on our class constant.

And so right below our elevation scroll we can make a div with a class name of remember from the example

that is classes dot toolbar margin classes two reference classes here into a bar margin to give us access

to the style that we created we can go ahead and make this a self closing div because that is all it

needs to do but you can see that I've got a little area right here and that's telling me the adjacent

J OSX elements must be wrapped in an enclosing tag so you can see obviously we cannot have these two

just sitting right next to each other.

And so I actually just want to wrap this in a react fragment

the react fragment just makes it so that I can have those two elements sitting side by side each other

without actually rendering anything else to the page like a wrapper div or something like that.

Now what that div with the toolbar margin class is doing is provided from material UI they give us that

is toolbar mix in so that we can solve this exact problem.

This contains the height of our app bar and when we apply it to this div what it does is it creates

a little cushion under the app bar since the app bar is floating fixed in place at the top of the screen

and then pushes the hidden content underneath it out to where it can be seen on the screen if we go

ahead and save this and then head back over to our application you can see now they are hello is not

being covered up and if you actually go back and you want to get rid of this and save again you flip

back and you see it's gone.

We'll go back and undo save and there it is again.

So like I said that is just putting a little invisible cushion underneath our app bar and making sure

that our content is being pushed out below it to where the user can see it on the screen.

With that in place we'll be ready to actually start putting content on the screen but we still have

plenty of work to do on the header and getting all the navigation setup which we haven't even touched

yet.

So let's go ahead and start working on that and using our new inline styling skills in the next video.