Okay.
Our app is looking not great at the moment and we do want to improve our styling.
Now, this is not a CSS web design course, so we're going to get some help from a styling framework.
And the one that we're going to use is the most popular one out there, which is material UI.
And if we just go to mui.com, then this will take us to the documentation for what we're going to use
in our application.
So if we go to the docs for material UI inside here, the current version is 6.1.7.
Now on the way, although they haven't given us a release date for it yet is version seven, which is
going to be based on Material Design three, which is a small difference, or a design difference to
Material Design two and we can take a look at this blog post because this is coming up, but it doesn't
really say when.
And they were planning to release version six and 7 in 2024, but we're coming towards the end of 2024,
and version seven is still not released of material UI now because there are some design differences.
If you were to use material UI v7, then you would most likely.
Although I can't 100% confirm this at the time of recording, be using Material Design three.
And there are some small differences.
Things like cards that we use in our styling.
They already come with rounded corners.
Now, as part of the design of our app, I'm going to add rounded corners to what our square components,
and you'll see what I mean by that as we start designing our application.
So what I'm going to suggest really is that we stick to version six, the stable released version that's
current in 2024.
Version seven isn't released yet, and it is going to contain some design differences.
So if you are following along and you're using the same components as me, then you'll have different
styles.
Possibly, and I cannot confirm this at the time of recording if you were to use material version seven.
So what I'm going to ask is if you want the same style and the same design that I'm going to demonstrate,
stick to the same version for material UI, because I cannot tell you what this is exactly going to
be like right now.
So we're going to go ahead and install this into our application.
And if we take a look at the installation, there's a few things we need to do to get this up and running.
First of all, we need to use npm install and get the material UI, material components, and also some
styling things for react emotion and emotion style.
So we'll just copy this command into the clipboard.
Head over to VS code.
I'll just close down what I currently have open.
We'll open up the terminal and we'll go to a clean tab.
We'll keep our client app running.
We don't need to stop this.
And we can go to a spare tab and we can use this to add packages.
So I'm just going to paste this into my terminal.
But before I commit this I'm just going to make sure that for material I get version six.
And I can do so by saying at six, and this will give me the latest version of version six of my material.
Now please do the same on your machine if you do want the same styles, if you're happy for it to be
styled slightly differently, and you're happy to look at the documentation and see the differences
when that documentation is released, it's not out at the time of recording.
Version six is the current version.
Then please use the same version as me.
Okay, so I'm going to press return.
And because I'm using a release candidate of react, I'm expecting this not to work because material
is going to have dependencies on react 18.
Now this is something that we might commonly see if we're using a release candidate version of react.
Once react has been released, then you shouldn't see this because the dependency tree is inside material
for what it depends on should be updated to accommodate this.
So because I've tried to use material v6 and I've got this react release candidate in the root project,
then I need to do something extra.
And it does tell us in this error what we need to do.
And since we're working or playing with a release candidate version of react, then this is what we're
going to do.
We're going to add on this switch whenever we encounter this particular problem, it tells us what we
need to do, and we can just go ahead and do that.
So I'm just going to copy this switch into my clipboard.
I'm going to repeat the command that I just made and add on the legacy peer dependencies switch.
And if I press return this should go ahead and install what we need.
And great it has done so.
So let's go back to the documentation.
And like I say, you don't need that legacy switch unless you're typically messing around with something
that's just been released or is a release candidate or is beta.
Then on those occasions, it's fine to use that switch.
Let's see what else we need to add.
We don't need to add styled components.
Let's keep going down.
We do need a font and material UI uses the Roboto font by default, and we can add that by copying this
npm install command.
Let's go back and I'll just clear this window again and paste this in.
We may need to use the legacy pier dependency switch again.
And in this case we do.
So once again I'm just going to repeat that command and copy this switch and paste in that switch and
press return.
And that gets installed successfully as well.
So back to the documentation.
We then need to import the CSS files for that fonts into our entry point.
Now the entry point in our application is the main dot TSX.
So let's head over to the main TSX.
I'll just use the shortcut this time command P in my case, and search for main.
And we can just add the styles for that font inside here like so.
So back to the documentation.
There's a few more things.
Or maybe one more thing that we need to do here.
And that's just to add an icon set.
And we're going to use material icons in our application as well.
So I'm just going to copy this into my clipboard.
Head back to VS code.
Go to the terminal, paste this in, probably face the same error again and then run the same command
but with the legacy peer deps switch.
And that should install successfully, which it has done.
So that's material UI installed.
Let's see if there's anything else that we need to do.
I do not believe there is.
That should be it.
And if we take a look at what this gives us, well this gives us components.
And if I do take a look at an example component that we're going to use and one that we will be using
early on is going to be the card.
And if we take a look at what this gives us, it gives us a styled card.
How we can use this to display something like our products, for example.
And there's going to be a bunch of examples, different cards inside here that we can take a look at.
And it also gives us the code that we need to use to make use of this.
Now, if we take a look at this example, it's probably more complex than most of them.
But we can see that a card is not just a card.
It's made up of several components.
We have a card component, a card header.
Inside here there's an avatar component.
There's card media component all inside this card.
So this is what we get with material UI and this is how we use it.
We also have a typography component.
So if we want our text to be styled using that Roboto font, then we do use that typography inside there
as well.
So let's take a quick look at using material UI just to make sure it is installed correctly.
And we'll make a few small changes into our application.
So we'll open up the app dot TSX first of all.
And if we go and take a look at our current state of our application, well, everything's pushed over
to the left inside here.
Maybe we would like to centralize this a bit and contain it in some way.
We'll also use typography for the title, and we'll use a material UI button as well.
We'll come back to the list of items soon, so let's just focus on what we can do inside the app for
the time being.
So if I want to centralize the content, then I can use a container that I get from material UI.
Now automatic importing should happen mostly, but sometimes it doesn't.
I press return there and it doesn't pop up in the list, but if it doesn't automatically import and
just use the quick fix.
In my case command and period.
And then we can add the import from UI material.
So I'm going to do that.
And what we should see at the top then is this import statement at the top.
Now what difference did that make on its own.
Well we can see that our content is now pushed across to the more center of the page.
And we can give our material UI components, properties.
And we could give this a max width, for example.
And then we've got different options that we can choose.
And I'm going to say that I want the max width of this to be XL.
And if I go back, we can see that the width of the screen is widened and our content is more over to
the left.
So great.
And let's continue.
Let's take a look at the typography next.
So instead of an H1 then we're going to use typography which we get from material.
So I'm going to press return to import that.
And once again it didn't import it looks like I'm going to be using the quick fix quite a bit.
So I'm going to update the import.
And that includes the typography.
And we can give this a variant.
We'll remove the style.
At this point we don't really want it to be red.
But this takes a variant property.
And if we remove and add back in the quote marks, then we can see the different options that we have
with typography.
So let's go for an H4 in this case and take a look at what we have.
And we can see that this has been styled with the Roboto font.
And we see that there.
and let's just make a change to the button.
So I'm going to go to the catalog component.
That's where our button is located.
And instead of button in lowercase b to use a material UI button, we make use of the button uppercase
B from UI material.
And once again the automatic import is not doing a good job.
So I'm just going to add the import using the quick fix.
And we can see that's added there.
Now button once again takes a variance.
And if we take a look at our choices it can be contained.
It can be outlined or just a text button.
So let's take a look at the contained button.
And if we go back and take a look we can see that we've now got a Material Design styled button inside
here.
So that's really just an example to show you how we can use material UI and make sure it's installed.
So what we'll take a look at next is changing this list into product cards so we can display our products,
their images, etc. and we'll take a look at that next.