Material UI React Tutorial

[Music] in this tutorial we're going to check out material ui what it is why people are using it and how to set it up in our next react application so if you haven't heard of it before we're going to create some buttons some headers and some other components and even apply some themes if you haven't heard of me before i'm adrian from australia i do videos around design and development so if you haven't already hit like and subscribe and let's just jump straight into it material ui is a number of pre-made components ready to go for your next website or application things like buttons headers sizings color all of that is ready in the material ui library and all you have to do is import it and use it in your react application it's built on the material design docs by google and these follow a number of architectures to make things look really good in terms of spacings and colors and even animation this is designed by the google team to help build high quality experiences whether it's on android ios or on the web this is the library that you'll see very popularly used on android systems and on a lot of applications today because it is one of the most popular libraries to use in terms of ui design even if you haven't heard of it before you've probably used it so what we're going to do is we're going to create a brand new create react app application we're going to import it straight in there we are going to create some of those buttons and titles and colors and even create maybe a light theme and a dark theme so that we can test out exactly how it works so let's do that now to start off with let's open up a terminal and run npx create react app and the name of our application in this case it's going to be material ui react tutorial we'll hit enter on that and that'll create up all the files we need with cra to get started once it's loaded we're going to open up vs code and we're going to browse into the directory so in this case mine is just located on the c drive in youtube and just here under material ui react tutorial we're going to browse into this folder and we're going to double check our packages.json which has the basic components we need here for react what we're going to do is we're going to open up the console in this directory and we want to install material ui and in order to do that we're going to do yarn add we're going to add in the library here so in this case the library is at material dash ui forward slash core so let's actually copy and paste this into our terminal and hit enter and this will add the package here into our libraries we should see the latest version which i think is version 4 just appear here in our dependencies once the library is installed we'll be able to see it here in our dependencies and we can start our react application now that it's installed what i'm going to do is i'm going to pass in yarn start in our console and this will load up create react app with a live application we can edit and this will just be here on the side so i'm just going to move vs code here on to the left what i want to be able to do next is browse here into src and open up app.js in this we'll start editing our application so for example we might not want this link here for learn react so we'll take that out and we might not want this text over here we'll just have our react logo sort of rotating and i want to import our first material ui component what i want to import is a button so what i'm going to do is i'm going to pass an import button from we're going to pass in the library name here which is at material ui forward slash core we're gonna pass in button here at the end which should auto complete this is the first component we're going to create so i'm just going to place this here above our logo when we pass this in we are going to be able to do a number of things the first thing i'm going to do is just give it some text in here so i'm going to say hello world and when we hit save on that we can see that our button is in here but it's kind of small and the text doesn't look right because it's black on gray so we're going to add some extra essential props in here to customize the layout or look of this button the first thing i want to do is probably browse into the documentation because it has a lot of the information about how this button looks so if we browse into the documentation here we'll be able to see we can have different colors we can have different styles such as outlined or disabled and this is done in a number of ways the very first one we're going to do is we're going to pass in variant and variant will essentially give us a number of options of how we want the button to look so in this case we can have outlined or text or contained so i'm going to do contained and i'm going to hit save on that when we do we can see that we've got a white color now and the button has black text and that looks a lot better we can also pass in a color so right now we're not defining any but in this case i might want to pass in the primary color and we get this blue or for example we could pass in secondary as well and if we do we should see this sort of pink purple color this is an example of how we can use the variations and colors to customize the component really easily and the styling just applies which is really cool now this button here right now isn't actually doing anything and you would expect a button to have some sort of interaction so what's really cool is that if for example we just pass a link in here such as a href and we hit enter on that and we click on our application we can see that the href has applied and we've got our hashtag up here that's an example of how we can turn this link directly into a button that is linkable straight away without too much effort but we can do other stuff here as well for example if you wanted to just do an unclick handler you can do that too so in this case i'm just going to do an empty arrow function here with an alert that says hello and let's hit save on that and select it and we can see that we've got our prompt here for hello as well so there's lots of ways you can utilize this you could even pass in this function to run something in your store for example but for the time being we'll just keep it nice and simple there are lots of other props we can pass into the button besides just our functions and our variations and colors for example if we wanted the size of the button to be smaller we simply pass in the prop here size small and we hit save on that we can see it's gotten a little bit smaller alternatively if we pass in large it'll just get a bit larger as well there are other things as well that we can pass in such as disabled and if we hit that we can see that it's been completely grayed out and it's no longer clickable either all of these are also in the documentation which i'll link in the description below but it gives you a number of options where the styling automatically just updates depending on what you need and all of the props and even the names are very well documented and easily accessible even if you don't know what they are they make sense small large etc if you want to apply your own styling to this button you can do that too let's pass in a style prop in here and for this style prop what i'm going to do is i'm going to create a font size and in this case i might reduce it down to 14 pixels and we'll hit save on that or we can make it even smaller maybe six pixels and we can see that that styling applies to the text alternatively we could make it much larger like 24 pixels and we can see that we can override some of the custom styling applied by material ui but we get that flexibility in case we want to utilize it but in this case i don't so i'm just going to take that out now you might have seen that some of the buttons on your ui have icons and for us to be able to have those we're going to have to add one more library here to material ui what i'm going to do is going to pass in yarn add we're going to pass in at material dash ui forward slash icons and we're going to hit save on that and this will add it here to our packages.json we'll be able to use this in our react application we're just going to have to relaunch it but what we're going to do is we're going to add an icon to our button over here it does have some autocomplete so if we type in start we can see we've got a prop here for a start icon and what i want to do is i want to maybe add a nice icon here that might be a save icon so let's actually pass this in as a component we're going to import i'm going to import this from our library here so let's import save icon from and we'll use our new library here which is material dash ui forward slash icons and in this case i'm just going to pass in save i'm going to hit save on that we're going to rerun our application here and we're going to test this out great that looks like it's finished so i'm going to pass in yarn start once more and we can load up create react app and once we do we'll see if our new button works and it looks like it has and it's passed in that icon over here at the start icon location which is at the start of the button there's another thing we can do and i think it's end button let's have a look and icon here it is so in case of us wanting for this icon to exist at the end of our button we can hit save on that we should see that it updates and it applies at the end of our button here and it looks like that's applied as well i think you can do both too but i've never actually tried that so let's give that a shot let's do start icon and end icon we can see we have one for both and this gives us an example of how we can pass the icons in directly into our button and we can reuse these later on but for the time being let's just save this as a start icon and let's have a look at creating another type of component here in material ui this next component we're going to create will supplement our button what i want to do is i want to create a button group and there's a component ready to go from material ui to do this which is just called button group and what we're going to do is we're going to wrap our button inside of a button group and in here we're going to add in and pass multiple buttons and they're just going to be grouped up together so what i'm thinking is let's do one here for save and one maybe for discard so let's do this renamed as save and this one here as discard save can essentially be a primary color while this card can be that secondary color let's hit save on that and take a look when we save it we can see that the design here has been updated what we have is we have this save one here with the primary color and we've got the curve here this curve doesn't happen again when we get to the edge and the discard one has its own curve here at the end of course we would probably need a different icon for this so here instead of save let's add a new icon in here and in this case i'm going to do a delete icon so let's just pass that in as a component in here and we'll place it here in our discard so let's hit save on that and we've got an icon here for save and icon here for this card we could add functionality or links to these but for the time being this gives us an idea of how we can use the button group since these are all in a button group we don't need to pass in some of these other props like the variant here we can pass this up to the button group and the color here as well we can pass up to the button group and if we do that and we only have say the start icon it gives us a standard design between the buttons here the problem is that we do lose the styling there on the discard but sometimes that's okay as long as you keep everything else consistent and that way we can have a consistent color here if we wanted to change it automatically apply to both buttons the next thing i want to be able to do is create a checkbox which is usually used in inputs and forms and what we're going to do is we're going to import this directly from the material ui library because they have some really interesting looking ones so instead of a button group this time let's rename this to check box and what i'm thinking is we might create a new functionless or functional component for this so let's call this check box example and in here we'll create it now for the time being i'll keep this empty and i'm just going to place this here above our button group so that we can see the changes live and i might place these inside of a div and let's just test to make sure that's in there so i'm going to hit save on that and we should see that compile and pop up here on the right now for the checkbox item we could just pass it in just like this and we should see it appear however the problem with this is that it needs a number of values here passed in as props to be able to function properly otherwise it won't actually do anything the very first one is checked and this will check whether it's checked or not so what i'm going to do is i'm going to pass in checked here as a value and we're going to have to define this value so let's define this with hooks i'm going to pass in checked here and set checked and what i'm thinking is that we'll use react dot use state for this and we'll set it to true to start off with what we're going to do is we're also going to pass in an unchange handler and this will eventually work by passing in a function here that'll call this hook and we're just going to set this to be essentially the event target so let's pass an e here and we'll do e.target.checked let's hit save on that and let's test that out we can see that it is working as per usual we can pass in other items here as props as well such as the color here we could set this to primary and it should become blue or alternatively we could set disabled here it will update the styling automatically however there is one thing to note and that's that checked items essentially have some wrapping happening so if you want to pass additional props besides the default ones here we're going to have to pass them here inside of input props as a prop title and in here we might want to pass in a label so let's do area label and in this case i'm going to pass in secondary and check box and let's hit save on that we can see that it has applied it's just something to take note of if you're doing checkboxes now then we've got a checkbox set up we don't really have a label next to it per se and if we want to add in labels properly we're going to have to add in another thing which is essentially a form label controller and i'm gonna actually create one over here so let's actually import it here directly from the material ui library and what i'm thinking is that we're gonna wrap this checkbox inside one of those now in order to do this we can't just write wrap it in as a child here we're actually going to have to close this off here and pass it in as a prop and the prop in this case is going to be called control and in here we can pass in the checkbox directly once we've got this done we only need to put a label in so in this case the label could be something like testing checkbox let's give this a shot and hit save and we can see that it's been applied there and it's working just fine so when we select it it's working and if we want to make our checkbox a little bit more interesting by giving it maybe some personality we can do that too there's a couple of options for example we could copy over these two icons and use them in our checkbox and pass them in as props so let's actually create an icon in here and we'll pass this one maybe in as a delete icon and then we can pass in maybe a second icon in here and this one could be a checked icon and in this case we'll pass in the save icon so now when it's checked we have a save there and when we uncheck it we've got a little bin there and it just gives us a little bit more flexibility of course we could pass in the same icon and the main difference here will be its color when it changes but it just gives it a little bit more personality the next thing i want to be able to do is to create a text input because they're very useful especially with forms so what we're going to do is we're going to import one directly from material ui so let's import text field from our library here so i'm just going to copy over the syntax here from the top and just import it and we're going to place this just above our checkbox here without any props to start off with when we hit save on that we can see that it's been applied but we can't see it very well due to the fact that we're using dark theme in the future we'll have a look at how to set up a theme here in material ui but for the time being i'm just going to jump here into our css and maybe we'll just pass in some custom css to make the text color here white and overwrite anything that might be placed from the default library so now we can see that text is white we can see our text field a little bit better there's a few props we can pass in here and let's take a look at what they can be the very first is maybe the variant so if we pass invariant we've got a few options in here we can do something like field and this will give us a bit more information about it and you can see it's wrapped here in this box another one here is maybe outline i think so let's give that a shot it's outlined and it's got a circle around it here or a border anyway and we can see that it's applying the primary color so we could change that to by passing in the color here as secondary let's save that and we can see now it's got that pink color so that's looking okay let's pass in some other props in here so let's do the type in this case and let's set this to date as soon as we do we can see that the contact has been applied here for a date so we've got the day day month month and year year and when we select it we can actually get a drop down and select different dates and they automatically fill out so that's pretty cool there's other types we can apply in here as well such as for example time and when we do that we have a clock here where we can sell select whether am pm and the time of day as well so that's pretty cool and all of this is automatically applied so we can start using it really well so that's really cool and now that we can see how that works we can define some other props in here for example we could put in a label and in this case i'm just going to put in the time when we apply this we can see that it's here in the background and if we change the variation here maybe from outline to what other options do we have here let's have a look let's do field again we should be able to see that it's just there in the background and it's got this nice animation when you select it so that you can see what's happening so that's pretty cool if we want to select other things to happen here such as maybe setting a value in manually we can do that too so let's set the type here this time to maybe email and the value to testing at test.com we can see that that's been applied but if we want to do that as a placeholder too we should be able to do that and we can see that it's just in here and it comes up as a placeholder as soon as we focus in on it so there's lots of flexibility that we can do here with the text field whether it's a type of email or date or time and it's really up to you on how you want to use it let's take a look at how we can do styling in material ui because when we take a look at creating our own website we usually need to have our own theme in there and styling is actually done pretty well it uses css in js and it comes with a lot of the same benefits that you normally get when you're using things like style components what we're gonna do is create a custom style for one of the components we already have here such as one of the buttons and in order to get started with that we do need to import the make style from the styling options here from material ui so let's pass this in here so make styles from and i'm just gonna grab the core packages here at material ui but we're gonna grab styles in here with this enabled what we can do is we can create a constant variable called use styles which we'll be able to reference later and this will call make styles and in here we're just gonna pass in a root style which we'll apply later to our button what i want to do is maybe a border of zero maybe a border radius and since we can't pass dashes in here since it's uh it's js we'll just do an uppercase radius and in here maybe i'll pass in 15 pixels or units let's do a color of white for the text and maybe a padding here of something like 0 and 30 pixels and finally let's give it a background and in this case for the background what i'm thinking is a linear gradient and for this i'm going to do this at maybe 45 degrees with two colors maybe a dark gray and a lighter gray so with that defined over here we should be able to apply it to a button there's a few different ways we can do this and in our case we're just going to create a new functional component and we're going to call this button styled and let's call this down here and i'm going to pass in cons classes and we're going to grab use styles from here and call it and we'll be able to then pass this straight into our button so we've got a button class here that we can put in so let's do return button called test styled button and i'm going to pass in the class name here with this classes.root and let's create this style button here just above our text field so i'm gonna pass it in here and let's hit save on that when we pass that in and refresh we can see that our button style here has been applied it doesn't have much padding but it has stronger border radius and we can update the styling here for example we could make the side on the right a bit darker or we could pass in completely different colors just to make it stand out a lot more as well we could also define a border or sorry a margin bottom here so that it's got a little bit more space between our input there at the bottom but it gives us an example of how we can stylize it of course sometimes you don't want the padding to be too high or too small and in this case i might just do 5 pixels and 30 pixels and here's our style button it still has all that really cool features of the expanding animation when you click on it but it also has our custom styles applied in here now if you want to redesign the entire theme that we're going to be using here for material ui you can do that too what we're going to do is we're going to create a theme provider and this will actually work as a parent that we can then utilize for updating all of our colors inside our application or website let's import this here directly from styles so we'll do theme provider and i'm actually going to place this here at the top of our component so that it's accessible for any of the components or containers below it so i'm just going to pass it in here now this theme provider actually requires us to pass in a theme which we can customize but for this theme we actually have to define it and to define it we're going to be using another thing which is just over here and that is create mui theme and we're going to call this and pass it into a constant class so let's call it down here so i'm going to call call const theme is equal to create m ui theme and we're going to define a slight variation to our primary color what i'm thinking is instead of passing in a normal palette color we're going to define palette here and this will define the palette for our primary color and for this let's pass in main and in this case i might pass in orange now for orange we haven't really defined that so let's actually do that as a weight off 500 and here in our styles let's copy this across and grab orange and we're going to grab this from the core colors let's hit save on that and see what happens so when we apply this and pass it directly into our application and refresh over here we should see that our theme updates and now our main color is orange we can change this to green for example and pass that in here as our main color and we can see that updates as well and it just gives us an example of how we can change the colors we could change out the secondary color here too so we could do green and orange to be our primary and secondary colors so let's define this here below and in this case i'm going to define them with a weight of 400 and we should see that apply so here we can see green and orange being applied for our primary and secondary colors now there's a lot more we can do with theming we can nest themes we can add on different types of styling but to start off with we would really want to have a look at the documentation because it's got some strict requirements of how you nest their theme files here and set them correctly so you guys can check that out in the documentation but what i want to be able to do now is have a look at what else we can do with material ui the next thing i wanted to take a look at is topography because when we're making a website we want it to look good and font sizes and the type of font we use is pretty important what we're going to do is we're going to use the default font here which is roboto for our website but before we can do that we need to import it so that it's part of the website and in order to do that we're going to need to install it so what i'm going to do is i'm going to open up our terminal over here and i'm going to install it by passing in yarn add and we're going to pass in font source and roboto here and this will grab roboto for us to be able to use it'll be in our packages but before it's in our application we also have to import it so to do that it's pretty simple we'll just pass an import font source and in this case it'll be roboto great so with that in there we should be able to have it now and i'm just going to do yarn start to get our application up and running and we can test that out and what i want to do is i want to make sure that our application essentially does have that updated styling so let's refresh it and we can see that it has been adjusted just a little bit now that we have this we can also utilize some of the components here from material ui to have better topography in general so let's take a look at that we're going to import it here as a component so let's import topography let me just spell this correctly topography from and we'll pass in our martillo ui core packages here and we'll put this into our application so what i want to be able to do is pass in maybe a heading here at the very top of our application and maybe you will call this welcome to mui now right now i haven't passed in a type of topography and we'll need to pass in a variant if we want this to have a specific size and color the variants are similar to what we would expect in normal html tags so h1 will be a h1 variant and we should see that come out to be a lot bigger so let's actually reduce the size of our page here and we can see welcome to mui this is a little bit too large so i'm going to reduce it to a h2 and we can see that's been adjusted and that's looking much better we can copy our topography out here and create another one and in this next one let's create a h3 element and let's pass in uh learn how to use material ui i'm going to hit save on that we can see that it's just in there unfortunately it's a little bit too big still so there's lots of other variations we can use if you have a look at the documentation on the website they give you all the examples in there but i'm just going to go through a few so subtitle one is another example and in this case it's much smaller and that looks pretty good we also can do things like body one which will be a much smaller size without as much margin at the bottom alternatively we can do stuff like buttons and outlines but in this case i think the subtitle one should do just fine the other thing we can do is that if we inspect this item over here we'll be able to see that we get a h2 class in here but if we wanted to have a h2 styling but a different component we have to essentially define that and we can define that here as a prop so let's do component in here and in this case i might want this component to be a div but with the h2 styling so we inspect it now we should be able to see now it's a div but it has that h2 styling applied which is really cool and this is useful in case you want other types of topography to apply in other types of components outside of the native one that they represent if we want to we can also customize the theme of our topography we can do this by jumping here into our create mui theme and what i'm going to do is i'm going to pass in some custom sizing here for maybe our h2 class just so that it's a little bit smaller so i'm going to pass in topography in here and pass them in as an object and in here we want to define our h2 class and in this one maybe i want the font size which we'll define as a javascript attribute to be maybe 18. so let's give that a shot and we should be able to see that it updates and it's a lot smaller now we can always increase it just a little bit so 24 or 36 and that way it'll look a little bit better so now we can zoom back into our page so that you guys can see that nicely and we can see how that applies we can pass in other parameters in here as well such as margin bottom we could set that probably to zero or we could set it maybe to 15 in here and we can see that that automatically applies to all h2 styling for our theme this just makes it a little bit easier and it shows how our theming essentially applies to all our components in our material ui design and it makes for a much better website if we want to keep things consistent now that we've got basic buttons and topographies and inputs set out we can take a look at some of the other things that we can do with material ui such as creating containers creating grids and doing general layout and what i'm thinking is we're going to start off with something simple such as creating a container and this is as intuitive as it might seem we'll just create or we'll just import container from material ui's container section over here and we're going to reference this and place this here in our application so what i'm going to do is i'm going to probably place this here at the top level and we'll wrap our website here with this container now with a container what it does is it represents a max width for our page and adds a little bit of padding on the left and the right and we should be able to see that over here right now we haven't define a size so what i'm going to do is i'm going to define one over here by passing in max width and for this max width in this case i'm just going to pass in sm for small and let's give that a shot so now when i expand it out we can see that we do have a width for this which is defined by the area that's in the darker brown slash gray but when we shrink it down a little bit we can see that that no longer applies it essentially stops at about maybe 700 pixels or something like that we can actually take a look and we can see here the max width is 600 pixels if we wanted to increase that all we have to do is apply a larger media query here so md would be a little bit larger lg would be even larger than that or we could just do xs which is almost like a mobile sized version and this keeps it a little bit more consistent to the size we're actually working with this container will essentially be able to work just like this but if we want more layout options we do have them we can do things like creating a grid as well so let's take a look at how we can do that what i'm going to do is i'm going to import a couple of components this time let's import paper from material ui and this will just be here so that we can see the material ui grid a little bit better so let's import it just over here and we're also going to import grid from material ui as well so i'll just pass it in here and what i want to be able to do is create a few paper components inside of a grid and then we can have a look at how we can define these to work the way we want so i'm gonna grab this paper object over here and all this paper component and i'm just gonna place it here near the top of our application maybe just below our button that we've styled over here i might get rid of this text field altogether and what i want to be able to do is create a grid component which wraps the papers in here so there's an example of our paper component beautiful now in order to see this properly i'm going to just give it some quick styling i might do a height of 75 pixels and maybe a width of maybe say 50 pixels and i think that should be about it there's our paper object or component and what i want to be able to do is create a few of these now with grids there's a couple of things we need to take note of when we're creating them the very first is that they can be a container or they can be an item in this case it's an item and what i want to do is i want to wrap this inside of another grid and this grid item here will be its container and this way the grid applies properly so let's pass in container here when we do we'll see that it should change its position now it's on the far left and what i want to be able to do is create a couple of these items so we can see how they work and we can see they're here back to back what we can do now is apply different types of props here like spacing and we could set the spacing to maybe four units and we should see that spacing apply here to our grid items if we have a smaller spacing say just two units we'll have a little less here and they just utilize as much as we provide and apply automatically there's other things we can do here as well we could for example justify the uh the content here and we could justify it to be centered and that way it looks a little bit better this is an example of how we can use grids and grid items to essentially stylize our content and lay it out the way we want to in our website design the next thing i wanted to take a look at is how we can make these grids responsive because responsive design is important whenever we're creating any website and to do this is actually quite simple what we're going to do is apply our responsive design in directly inside of our grid component so for example if on the xs viewport which is mobile we want this grid to span 12 units which is essentially the full width that we can apply then that'll automatically take place and we can see that it's on its own row here so if we set this to have a hundred percent width now we should be able to see that encapsulate that space if then we wanted to apply a different width here or maybe the sm level of maybe six columns then as we expand out we should be able to see that take effect and we can see here it has taken effect and it's six units whereas now it's got its own row here using the full 100 we can also apply different units in here such as here we could apply an excel viewport of maybe three units and over here as well so let's apply those and we'll need to have a hundred percent width so we can see those changes in here and i think no that hasn't come out exactly the way i want so let's actually apply this with an sm to start off with and what we're going to do is since this goes through the mobile responsive design of mobile first we should be able to see them take effect and usually it's best to define them from the mobile version first so in this case what i'm going to do is i'm going to do three units over here but as we expand out we might have a slightly different version where for example on the sm viewport we might have six units and then maybe here on the lg viewport this will go to 12 units so as we expand out let's give that a test and we can see that working quite well this is an example of how we can essentially create our own responsive design here and if we want the layout to dynamically update depending on the viewport we're on we can simply pass in that viewport like xs and it'll utilize as much space as it can on that viewport and it'll automatically update that layout as we can see here utilizing that full space but in my case i don't really want to do that so i'm just going to save it as three units so that it's got a little bit of space there on the left and the right what i really like about material ui is the fact that you get so many pre-made components ready to go and let's take a look at one now i want to use the app bar so we can put a nice app bar here at the top of our website with maybe a title or some other stuff so let's import that directly from the library here appbar from and let's copy over this syntax here and grab that now the app bar does need a few other things we'll also need a toolbar uh we'll probably also need to grab an icon button and finally we'll need an icon to place in that button and in this case what i'm thinking is maybe we'll utilize a similar icon or maybe a menu icon in this case so i'm just gonna grab a menu icon here and let's define this here at the very top of our application so what i'm gonna do is here near the very top i'm going to place that in and we'll create app bar now this essential container will have a few things it'll obviously have the toolbar so let's pass in toolbar here and this toolbar we will have the icon for the button so let's pass in um icon button and menu button in here or menu icon anyway and we'll close that off and the other thing it'll also need is maybe a topography of what the title is so let's pass in topography and this topography maybe we'll do the variation for this one as a h6 tag and for this let's pass in maybe something like mui theming and finally at the far right we might have one more button in there so let's pass in button here and in this case i'm just gonna type in login so let's hit save on that and the thing we're missing here is a menu icon so looks like i've passed in the wrong styling here for this let's take a look at what this should be the menu icon should be just menu and that should update correctly so let's hit save on that and here is our header we can see that we've got our menu button we've got our login button we've got our title in there as with all components we can customize the styling for this in this case let's set the color here to be become secondary when we do we've got that orange color which looks okay the other thing we might want to do is get rid of some of these palette colors that we've manually defined just because i don't really like how they're looking right now and we might just have our own definition which just uses that pink and that blue and finally we can see that we need a little bit of a margin here at the top of our page so i'm just going to jump here into our css and here in our app what i'm thinking is that we might have a bit of margin applied so that margin should be about 60 pixels so i'm just gonna do margin top to 60 pixels or maybe about 58 here and that should apply maybe 55 and we can see that has applied so we've got a bit more room here we can see all of our design there are a heap more components we can utilize with react and material ui so if you want videos on those leave a comment below and let me know otherwise hit like and subscribe and i'll see you in the next one thank you

Channel: Traversy Media

Views: 260,917

Rating: 4.9308591 out of 5

Keywords: material ui react, react material ui, material ui, material ui tutorial, material ui tutorial 2020, react material ui tutorial, react material ui crash course, material ui react tutorial, material ui 2020, materialui, materialui tutorial, mui tutorial, mui react, mui react tutorial, react, reactjs material ui, material ui reactjs, material ui tutorial for react, material ui tutorial for beginners, material, ui, reactjs, tutorial material ui, tutorial react material ui

Id: vyJU9efvUtQ

Length: 42min 58sec (2578 seconds)

Published: Fri Oct 09 2020