Material UI Tutorial #12 - Layout Component

Key Takeaways

all right then so now we have all of this content right here what i'd like to do is kind of step away from this a little bit and create a layout file that is going to surround this content and not just the content on this page but also the content on the create page now this layout component is going to consist of eventually a side draw with some links on to these different pages and also an app bar at the top with maybe a title or something like that so what i'd like to do in this video is just create a layout component for this layout file and then that layout component is going to wrap all of the content on both of the pages so then let's create that file first of all i'm going to do that inside the components folder so let's create a layout.js file and then i'll boilerplate this this is called layout and then inside let's just place some text for now layout now how do we get this to wrap all of our pages well all we need to do is come to the root components where we output these pages right here and it's going to surround this switch component now it needs to surround this one and not the router one because we are going to use the router inside the layout component so it has to go inside the router component so all i'll do is say layout right here i'm going to click on this to auto import it at the top and then i'm going to wrap it around the switch component so let me grab that and place it at the bottom over here so now if i save this what's going to happen well if we come over here and we're on the create page we just see this text right here layout and if we go to the home page we just see that text layout and that's not what's supposed to happen i want to still see the page content but i want to see this layout content wrapping around that page content so why is this not working well it's because we have this layout component right here so react looks into that layout component and it says well okay this is the content for that so i'm just going to display that and it discards all of the children all of these things inside the layout component now we don't want it to discard the children we want to output the children but we need to output them explicitly inside this layout components now we get access to the children on the props directly here so we can destructure that by saying children like so and this children property represents all of this content right here so all we need to do is output that somewhere inside this layout so i could now just say children like so and that's gonna output them so we can see all the content here and if we go to forward slash create we see all the content here so this is pretty much now like we had it before before we even started the layout component only now we can add in content above it or below it if we want a footer or a sidebar somewhere as well so it makes it a bit more flexible this approach all right then so what i'd like to do is first of all wrap this in some kind of div so let me do a div and open this up we'll place the children inside it now i also want to give a class to this div so we can style it a little bit and we're going to be using make styles to create this class in a second so i'll set this equal to classes dots and we'll call it page because all of the page content is essentially going to go here all right then so we need to use the make styles now to create these classes so let's do that i'm going to say const use styles is equal to make styles i'm going to click on this to auto import it at the top and inside here we pass a function so all i want to do is make one class which is the page class and that is going to have a background color so we'll say background and that's going to be a hash code so f 9 f9 f9 it's a really light gray after that i'm also going to say the width of this will be 100 all right then so if i save this now then it says right here classes is not defined that's because we've not used this u styles hook right here so let's do that i'll say const classes is equal to use styles like so okay so save that now and now we see it and you should just be able to make out that light gray background of the content and it should be the same for the home page if we go there yep we get a light grey background awesome so that's worked all right so eventually like i said we're also going to have an app bar inside here so let's do a little comment for that right here up bar at the top we're also going to have a side draw so a comment for that as well now we're not going to make those in this video but we are going to start on the side draw in the next tutorial but at least now we have our layout component ready to go