All language subtitles for 8. Styling - Themes (Setup)

With our header in place and now that you know how to import material UI components and use them it's

time to figure out how to customize those components with their styling system.

The first part of the styling system that I want to talk about is specifically the theming system that

they have set up for us and how you can use the theming system to centralize your styles and create

a consistent look throughout your application.

There are a lot of benefits to these styling system.

The material UI uses so we're gonna go over those as well.

The first part of the theming system to really understand is the palette the palette is a way to manage

the colors used in your application but material UI actually takes it a step farther than that and provides

some really interesting functionality around it for us so let's go over to the material UI documentation

and we'll take a look at how we can set up the theming system and what they already provide for us.

So here we are on the material UI styling section and so that's under styles and then basics on their

documentation page.

And here it kind of goes over why material UI is styling solution is so green.

It is extremely fast as it says here.

It's very easy to use.

It's very small.

You can see here only 15 kilobytes.

So it's not adding actually anything to your bundle size.

If it's used with material UI because you can actually use the styling solution separately.

But what I also really like about it and what was new to me before I had learned this was J S S and

I'm not sure if you're familiar with that or not but that is a javascript to see SS compiler and it

actually works here it says at runtime and server side which will be important when we later migrate

to next J.S. but J SS is a really interesting solution which allows you to write all of your styles

as a javascript object in your components and that really enables some interesting behavior as they

say here like theme nesting and dynamic styles and self support dynamic styles is really what I think

is the coolest where you're able to use javascript and a state of your components to change the styling

in a really smart way so to start taking a look at how we can use J SS for our styling in a material

UI we go down here and you see we actually have to install a separate package this material UI styles

and then we're going to go over to the command line to install that in our project directory so here

we are at the terminal and I'm already in my project directory so make sure you're in our arc development

folder and then just paste in that command that we copied over npm install app material dash UI slash

styles and we're gonna go ahead and hit enter to install that all right.

And you can see here the mine was successfully installed version for DA for da one so now go ahead and

open up your project directory in your code editor and then we'll go back to the documentation to see

the next step for getting started.

Here we are back at the material UI documentation.

But this time we're at the bottom tab of customization and then overview overview.

So we're here at the theming section.

And as I've said it says here that themes that you apply a consistent tone to your app.

So it allows you to centralize and customize all aspects of your design while still extending the default

functionality provided by material UI.

The first step here that it says to get started is if we want to customize our theme we need to use

a theme provider component that theme provider comes from the package that we just installed the material

UI styles.

And if we come down here to the first example and show the source code we can actually find that theme

provider right up here.

So this important statement we're actually going to go ahead and copy that.

But you can see down here where it's used that you're simply wrapping the component that you want to

have the theme provided to with the theme provider and then passing the theme to the theme.

Prop so we're still going to have to create this theme file.

But first let's just go over to our code and get this theme provider set up so I've open my project

folder in my code editor and up here at the top in the app dot J.S. file under the source folder and

then the components folder up here at the top underneath are react important statement.

Let's go ahead and paste that import theme provider from material UI styles then we can come down here

and actually get rid of our wrapping div and we're going to replace that with our theme provider.

So we'll open that up and just move our content right inside of their clean up a little now as we saw

in the example.

We still need that theme file.

So let's go ahead and under the UI folder under the components folder inside the UI folder was a go

and create a new file and named this theme that J.S. once you've created that file let's go back to

the documentation page to take a look at how we should set this up.

So at the theming material UI documentation page the overview under customization.

If you scroll back down all the way into the bottom here and you'll see where it says the API create

M UI theme.

So we want to generate a theme based on the options that we provide.

So this is exactly what we want to do.

And this is the little example that we need right here.

What's important here is the important create M UI theme from.

And this is important material UI slash core slash styles which is different than the material dash

UI slash styles that we had just installed.

So be aware that there is material dash UI slash core slash styles and app material UI slash styles

but after importing create M UI theme you see that we use it by calling it as a function and passing

to it in object and then we are going to assign that object result to the constant named theme.

So what's going on here.

So when we create our M UI theme this creates an instance of the default M UI theme and then essentially

tells it that we want to overwrite any of the default values with this object that we're going to pass

within it then we're going to store that newly modified theme with all of the overwritten values and

all of the default values we didn't overwrite store all of that as an object inside of our theme.

Constant then we're going to be passing this theme into our theme provider which then passes these styles

onto our application so let's go ahead and get the backbone of our theme setup by copying this important

statement.

The import create M UI theme we're gonna copy that and go back over to our code editor inside of the

themed J.S. file and we're going to paste that right at the top then underneath the import statement

we're actually just going to export default and then we're going to call our create and UI theme and

we'll just have that being the default export of this file so that we can easily imported to just pass

directly in to the theme provider before we go in and actually start filling out what we want for our

theme.

I think we need to go and take a look at what the default theme that they're providing for us has so

that we know what values we're overwriting and how it is set up.

We can go ahead and just save this here with the empty object.

We're not really going to mess with it right now but we can come back to the app J.S. file and here

we can import the theme and I'm using a lowercase t there because this is not a component from da slash

UI slash theme and now we can go ahead and pass that theme to our theme provider under the theme prop

so we can go ahead and save that now.

And once we go ahead and start adding content into our theme file it will already be wired up and ready

to go in our application.