WEBVTT 00:00.380 --> 00:00.830 Okay. 00:00.980 --> 00:06.740 Our app is looking not great at the moment and we do want to improve our styling. 00:06.740 --> 00:12.650 Now, this is not a CSS web design course, so we're going to get some help from a styling framework. 00:12.650 --> 00:18.800 And the one that we're going to use is the most popular one out there, which is material UI. 00:18.800 --> 00:26.240 And if we just go to mui.com, then this will take us to the documentation for what we're going to use 00:26.240 --> 00:28.220 in our application. 00:28.340 --> 00:37.760 So if we go to the docs for material UI inside here, the current version is 6.1.7. 00:38.060 --> 00:46.760 Now on the way, although they haven't given us a release date for it yet is version seven, which is 00:46.760 --> 00:52.580 going to be based on Material Design three, which is a small difference, or a design difference to 00:52.610 --> 00:59.420 Material Design two and we can take a look at this blog post because this is coming up, but it doesn't 00:59.420 --> 01:00.710 really say when. 01:00.710 --> 01:06.900 And they were planning to release version six and 7 in 2024, but we're coming towards the end of 2024, 01:06.930 --> 01:12.690 and version seven is still not released of material UI now because there are some design differences. 01:12.690 --> 01:19.170 If you were to use material UI v7, then you would most likely. 01:19.170 --> 01:24.990 Although I can't 100% confirm this at the time of recording, be using Material Design three. 01:24.990 --> 01:26.580 And there are some small differences. 01:26.610 --> 01:28.800 Things like cards that we use in our styling. 01:28.830 --> 01:31.470 They already come with rounded corners. 01:31.500 --> 01:37.980 Now, as part of the design of our app, I'm going to add rounded corners to what our square components, 01:37.980 --> 01:42.270 and you'll see what I mean by that as we start designing our application. 01:42.420 --> 01:47.640 So what I'm going to suggest really is that we stick to version six, the stable released version that's 01:47.640 --> 01:49.290 current in 2024. 01:49.320 --> 01:53.310 Version seven isn't released yet, and it is going to contain some design differences. 01:53.310 --> 01:58.590 So if you are following along and you're using the same components as me, then you'll have different 01:58.590 --> 01:59.370 styles. 01:59.370 --> 02:05.890 Possibly, and I cannot confirm this at the time of recording if you were to use material version seven. 02:05.920 --> 02:11.230 So what I'm going to ask is if you want the same style and the same design that I'm going to demonstrate, 02:11.230 --> 02:16.000 stick to the same version for material UI, because I cannot tell you what this is exactly going to 02:16.000 --> 02:17.380 be like right now. 02:17.440 --> 02:21.280 So we're going to go ahead and install this into our application. 02:21.280 --> 02:26.830 And if we take a look at the installation, there's a few things we need to do to get this up and running. 02:26.860 --> 02:33.130 First of all, we need to use npm install and get the material UI, material components, and also some 02:33.130 --> 02:36.490 styling things for react emotion and emotion style. 02:36.520 --> 02:39.160 So we'll just copy this command into the clipboard. 02:39.160 --> 02:40.480 Head over to VS code. 02:40.480 --> 02:43.030 I'll just close down what I currently have open. 02:43.060 --> 02:46.870 We'll open up the terminal and we'll go to a clean tab. 02:46.870 --> 02:49.090 We'll keep our client app running. 02:49.090 --> 02:50.530 We don't need to stop this. 02:50.530 --> 02:54.580 And we can go to a spare tab and we can use this to add packages. 02:54.580 --> 02:57.370 So I'm just going to paste this into my terminal. 02:57.370 --> 03:03.460 But before I commit this I'm just going to make sure that for material I get version six. 03:03.460 --> 03:11.140 And I can do so by saying at six, and this will give me the latest version of version six of my material. 03:11.170 --> 03:16.630 Now please do the same on your machine if you do want the same styles, if you're happy for it to be 03:16.630 --> 03:22.510 styled slightly differently, and you're happy to look at the documentation and see the differences 03:22.510 --> 03:25.900 when that documentation is released, it's not out at the time of recording. 03:25.900 --> 03:27.940 Version six is the current version. 03:28.000 --> 03:30.550 Then please use the same version as me. 03:30.580 --> 03:32.230 Okay, so I'm going to press return. 03:32.230 --> 03:39.220 And because I'm using a release candidate of react, I'm expecting this not to work because material 03:39.220 --> 03:43.060 is going to have dependencies on react 18. 03:43.240 --> 03:48.880 Now this is something that we might commonly see if we're using a release candidate version of react. 03:48.910 --> 03:55.570 Once react has been released, then you shouldn't see this because the dependency tree is inside material 03:55.570 --> 03:59.350 for what it depends on should be updated to accommodate this. 03:59.380 --> 04:06.390 So because I've tried to use material v6 and I've got this react release candidate in the root project, 04:06.390 --> 04:07.830 then I need to do something extra. 04:07.830 --> 04:11.640 And it does tell us in this error what we need to do. 04:11.670 --> 04:18.840 And since we're working or playing with a release candidate version of react, then this is what we're 04:18.840 --> 04:19.410 going to do. 04:19.440 --> 04:26.730 We're going to add on this switch whenever we encounter this particular problem, it tells us what we 04:26.730 --> 04:29.190 need to do, and we can just go ahead and do that. 04:29.190 --> 04:32.610 So I'm just going to copy this switch into my clipboard. 04:32.610 --> 04:40.590 I'm going to repeat the command that I just made and add on the legacy peer dependencies switch. 04:40.590 --> 04:44.880 And if I press return this should go ahead and install what we need. 04:44.880 --> 04:47.310 And great it has done so. 04:47.310 --> 04:49.380 So let's go back to the documentation. 04:49.530 --> 04:55.680 And like I say, you don't need that legacy switch unless you're typically messing around with something 04:55.680 --> 04:59.010 that's just been released or is a release candidate or is beta. 04:59.040 --> 05:02.880 Then on those occasions, it's fine to use that switch. 05:03.480 --> 05:05.310 Let's see what else we need to add. 05:05.310 --> 05:06.840 We don't need to add styled components. 05:06.840 --> 05:07.740 Let's keep going down. 05:07.740 --> 05:15.030 We do need a font and material UI uses the Roboto font by default, and we can add that by copying this 05:15.030 --> 05:16.050 npm install command. 05:16.080 --> 05:20.190 Let's go back and I'll just clear this window again and paste this in. 05:20.220 --> 05:23.820 We may need to use the legacy pier dependency switch again. 05:23.820 --> 05:26.070 And in this case we do. 05:26.100 --> 05:33.030 So once again I'm just going to repeat that command and copy this switch and paste in that switch and 05:33.030 --> 05:33.780 press return. 05:33.780 --> 05:36.480 And that gets installed successfully as well. 05:36.480 --> 05:38.340 So back to the documentation. 05:38.340 --> 05:43.950 We then need to import the CSS files for that fonts into our entry point. 05:43.980 --> 05:47.940 Now the entry point in our application is the main dot TSX. 05:47.940 --> 05:51.630 So let's head over to the main TSX. 05:51.630 --> 05:56.160 I'll just use the shortcut this time command P in my case, and search for main. 05:56.220 --> 06:03.270 And we can just add the styles for that font inside here like so. 06:03.270 --> 06:05.250 So back to the documentation. 06:05.250 --> 06:06.090 There's a few more things. 06:06.120 --> 06:08.310 Or maybe one more thing that we need to do here. 06:08.420 --> 06:11.330 And that's just to add an icon set. 06:11.330 --> 06:15.140 And we're going to use material icons in our application as well. 06:15.140 --> 06:17.780 So I'm just going to copy this into my clipboard. 06:17.780 --> 06:18.890 Head back to VS code. 06:18.890 --> 06:24.950 Go to the terminal, paste this in, probably face the same error again and then run the same command 06:24.950 --> 06:29.450 but with the legacy peer deps switch. 06:29.450 --> 06:33.980 And that should install successfully, which it has done. 06:33.980 --> 06:36.440 So that's material UI installed. 06:36.440 --> 06:38.300 Let's see if there's anything else that we need to do. 06:38.330 --> 06:39.560 I do not believe there is. 06:39.560 --> 06:40.700 That should be it. 06:40.700 --> 06:45.470 And if we take a look at what this gives us, well this gives us components. 06:45.530 --> 06:52.070 And if I do take a look at an example component that we're going to use and one that we will be using 06:52.670 --> 06:54.650 early on is going to be the card. 06:54.650 --> 06:58.940 And if we take a look at what this gives us, it gives us a styled card. 06:58.940 --> 07:03.620 How we can use this to display something like our products, for example. 07:03.800 --> 07:08.840 And there's going to be a bunch of examples, different cards inside here that we can take a look at. 07:08.840 --> 07:13.520 And it also gives us the code that we need to use to make use of this. 07:13.550 --> 07:17.990 Now, if we take a look at this example, it's probably more complex than most of them. 07:17.990 --> 07:21.530 But we can see that a card is not just a card. 07:21.530 --> 07:23.330 It's made up of several components. 07:23.330 --> 07:25.550 We have a card component, a card header. 07:25.580 --> 07:28.580 Inside here there's an avatar component. 07:28.580 --> 07:31.280 There's card media component all inside this card. 07:31.280 --> 07:36.140 So this is what we get with material UI and this is how we use it. 07:36.170 --> 07:38.690 We also have a typography component. 07:38.690 --> 07:45.800 So if we want our text to be styled using that Roboto font, then we do use that typography inside there 07:45.800 --> 07:46.550 as well. 07:46.550 --> 07:51.830 So let's take a quick look at using material UI just to make sure it is installed correctly. 07:51.830 --> 07:55.400 And we'll make a few small changes into our application. 07:55.400 --> 07:58.310 So we'll open up the app dot TSX first of all. 07:58.310 --> 08:04.400 And if we go and take a look at our current state of our application, well, everything's pushed over 08:04.400 --> 08:06.410 to the left inside here. 08:06.440 --> 08:11.090 Maybe we would like to centralize this a bit and contain it in some way. 08:11.140 --> 08:17.140 We'll also use typography for the title, and we'll use a material UI button as well. 08:17.170 --> 08:23.530 We'll come back to the list of items soon, so let's just focus on what we can do inside the app for 08:23.530 --> 08:24.190 the time being. 08:24.190 --> 08:31.300 So if I want to centralize the content, then I can use a container that I get from material UI. 08:31.330 --> 08:36.550 Now automatic importing should happen mostly, but sometimes it doesn't. 08:36.580 --> 08:40.900 I press return there and it doesn't pop up in the list, but if it doesn't automatically import and 08:40.900 --> 08:43.060 just use the quick fix. 08:43.090 --> 08:45.130 In my case command and period. 08:45.130 --> 08:49.390 And then we can add the import from UI material. 08:49.420 --> 08:50.740 So I'm going to do that. 08:50.740 --> 08:55.330 And what we should see at the top then is this import statement at the top. 08:55.330 --> 08:57.220 Now what difference did that make on its own. 08:57.250 --> 09:04.270 Well we can see that our content is now pushed across to the more center of the page. 09:04.270 --> 09:08.230 And we can give our material UI components, properties. 09:08.230 --> 09:11.140 And we could give this a max width, for example. 09:11.140 --> 09:13.430 And then we've got different options that we can choose. 09:13.460 --> 09:17.030 And I'm going to say that I want the max width of this to be XL. 09:17.030 --> 09:23.090 And if I go back, we can see that the width of the screen is widened and our content is more over to 09:23.120 --> 09:23.900 the left. 09:23.930 --> 09:25.100 So great. 09:25.160 --> 09:26.600 And let's continue. 09:26.600 --> 09:30.320 Let's take a look at the typography next. 09:30.320 --> 09:36.530 So instead of an H1 then we're going to use typography which we get from material. 09:36.530 --> 09:39.200 So I'm going to press return to import that. 09:39.200 --> 09:43.640 And once again it didn't import it looks like I'm going to be using the quick fix quite a bit. 09:43.640 --> 09:45.170 So I'm going to update the import. 09:45.170 --> 09:47.360 And that includes the typography. 09:47.390 --> 09:49.880 And we can give this a variant. 09:49.910 --> 09:50.900 We'll remove the style. 09:50.900 --> 09:52.970 At this point we don't really want it to be red. 09:53.060 --> 09:55.520 But this takes a variant property. 09:55.520 --> 10:01.730 And if we remove and add back in the quote marks, then we can see the different options that we have 10:01.730 --> 10:02.870 with typography. 10:02.870 --> 10:08.540 So let's go for an H4 in this case and take a look at what we have. 10:08.570 --> 10:12.140 And we can see that this has been styled with the Roboto font. 10:12.140 --> 10:13.430 And we see that there. 10:13.440 --> 10:15.900 and let's just make a change to the button. 10:15.900 --> 10:17.760 So I'm going to go to the catalog component. 10:17.760 --> 10:20.580 That's where our button is located. 10:20.610 --> 10:29.160 And instead of button in lowercase b to use a material UI button, we make use of the button uppercase 10:29.190 --> 10:31.200 B from UI material. 10:31.200 --> 10:35.010 And once again the automatic import is not doing a good job. 10:35.010 --> 10:37.920 So I'm just going to add the import using the quick fix. 10:37.920 --> 10:40.050 And we can see that's added there. 10:40.050 --> 10:42.750 Now button once again takes a variance. 10:42.750 --> 10:46.020 And if we take a look at our choices it can be contained. 10:46.020 --> 10:49.050 It can be outlined or just a text button. 10:49.050 --> 10:51.990 So let's take a look at the contained button. 10:52.290 --> 10:58.890 And if we go back and take a look we can see that we've now got a Material Design styled button inside 10:58.890 --> 10:59.460 here. 10:59.880 --> 11:06.150 So that's really just an example to show you how we can use material UI and make sure it's installed. 11:06.150 --> 11:11.610 So what we'll take a look at next is changing this list into product cards so we can display our products, 11:11.610 --> 11:15.840 their images, etc. and we'll take a look at that next.