🔥 Material UI and NextJS 14 & React 18

what's going on everyone so in this video I'm going to show you guys how to use nextjs with material UI and it's not just going to be placing a button on the screen or something very simple it's going to be pretty actually um in detail so when I in detail we're going to create something very cool a menu for a video game I'm going to show you guys soon but we're going to go ahead and create a custom theme custom components and you will see how to do uh it properly so without wasting time let me just show you what I buil and here we go yes so as you can see this is a futuristic kind of menu for a video game and this is entirely created uh with a custom component uh the Border as you can see for this menu and then the buttons these are all custom made and as you can see see also the corners you can see the material doesn't come like this so we have to do our own magic and then look at the hover State they kind of go in and when I click on them Boom the state comes here so how cool is this um so yeah just uh let's just jump right into it then all right so here I am uh in my terminal and what I will do is I will uh just create a next project so I'll do npx create next app and we will do add latest all right so we're going to call it uh next mu app like that and we'll just go and say yes to everything awesome all right so now uh let's just go into it so I'll say next mui app like that and let's just open it in vs code boom right here all right so it's all up and running and uh how about we fire it up I think I can do this and what I'll do is I'll say npm runev all right great so it's running on 3,000 so let's check that out so I'll come here we're going to go to 3,000 all right so here's your uh here's your next app and then here's vs code so let's go to app go to page. TSX let's just put them side by side all right so I'm going to go ahead and get rid of this Main and then let's go ahead and do H1 and we will say next JS Plus uh we'll just say mui app like that save it great so it's coming here all right so now we need to install a couple of things but I think I should uh increase the font size all right so you're going to come to the material UI installation page and it's got the emotion style components and let me increase this and then the style compon so you do not want to use this because it's going to cause you issues you can read more about this so we're going to come ahead uh we're going to go ahead and use this one so this if you are just doing a plan react project that's fine but if you'll be using style uh server components which we're doing actually here then this won't work so just a word of caution all right so I have already so not copied then I'm going to copy it again and we're going to come here and and we're going to do clear this and I'll paste this and enter all right cool so once that is done uh you probably don't need this and then you're also going to install the robot font and I'm just going to do that quickly all right so with the dependency installed then what I can do is let me come here and let's see if we can do make sure sure that this works so typography typography save okay so there you go so no errors so now if I come here and I do variant let's say H1 boom there you go so that works so let's see let's just see so as you can see if already it has it's using the roboton family but I think we need to still import those CSS so we're going to do this when we create our custom theme all right so how do we do this so let's come here and we're going to go to the app folder and I'll create a new folder and let's just call it theme you can call it style whatever you want and then within it I'm just going to create a new file. theme TS theme. TS all right so here is where I can import the robot so I can say robot and we can say from next font Google like that all right and then we will also import create theme from mu material and you want to bring it from Styles like that this should be robot to cool now when that is done then I'm going to go ahead and copy these and we will put them here like that okay with that done and then we will also create another file right here and I will call it colors. TS so this is where you can put your custom colors I already have a set and I'm just going to paste them so primary secondary and blah blah blah all right cool so now that we have that then the other thing we can do is we can say const Roboto is equal to Roboto and then specify the weight for the fonts okay so different weight so I'm going to go with let's say 300 I'm not going to type them I'm just going to paste them like that and then you want to use the subsets Latin and then finally the display we're going to set that to swap all right cool with that done then we're going to come here and create the theme so I can do cons theme is equal to create and this where the fun starts okay so let's go with the pallet mode and let's see if we can use our theme so I'll do mode let's say of light okay so it's going to be light mode so if I come here I think the default that's just the next s project the background is black but let's see if we can switch the mode first to dark or light so I'm going to come to my app and I'll do a component okay and then within this I'll create another file and I will call it theme registry. TSX and then I can do RFC theme registry. TSX well that's the file all right so what's going to be inside of this file and so I'll show you where it comes from so let's go to material UI we're going to come here and we are going to go to how to guides and then you see how there's this nextjs app router I'm going to come here and so this is since the uh next the app router is a kind of different way of working so you need to follow this uh if you want to create your own theme and they are actually you need to create some kind of like emotion cache and then you need to provide that to the theme then you need to provide that to the entire app so they have this example here here but we are going to come and we're going to use this one see them registry. TSX I'll copy this as is and I will just paste it here all right so now there's definitely definitely some problems so number one is theme so where is our theme coming from I am just going to get rid of this and let's do like this react let's fix this first so that's one all right so number two is they were talking about theme so since we made our own theme then we can use that it looks like we're not exporting it probably theme oh yes export cons theme then I can come here and I can do theme boom like that all right so that fixes that problem and so now here's a problem we're talking about props in children all right so this is how we will do it I'm going going to comment this out and then I will do like this children okay and then we need to tell it what children is so I'll say children is of type react react node okay so that fixes that problem okay so once that is done then for options all you have to supply is I'll do const options is equal to and it's called going to contain a value of key and we'll set that to mui like that cool so that fixes that problem so I don't need this I'm going to save it all right so now it's complaining about this error so we copied this example here and that's because there's two defaults so since we already have this layout right here we don't need this so I'm going to get rid of this as well and ah there you go so that error is gone so we are all green all right so now let's come here to our layout this our main layout and we need to provide now this theme to everyone so I'll do theme registry like that and then you take this you're going to put it here and I think that should that should do it I'm going to remove this that's the default nextjs by the way stuff and I I don't need this and I also don't need this okay and let's just do next save it aha there you go so now the um okay so this coming from the global. CSS and let's go over here and see what's going on so if I come here to my Global CSS okay so that's this guy so let's get rid of that and also this save it beautiful so now as you can see our theme is kicking in and if I go back to my theme here's the fun thing if I switched it to dark I refresh boom there you go so that's your dark theme so it looks like our theme is kicking in which is amazing okay so the other thing you can do is if I come to my layout let's say I want to Center everything uh actually not so I'm going to come to my page and let's now start working here so I can come here and I can for example do container from Material UI okay and then we can take everything put it here okay so there you go so now it's in a container and if I move it around you can see how it's responsive and you can see this Gap that's pretty cool all right so but let's say now uh I'm going to put this in a box so you can bring this also and I'm going to put this in the box so as you can see we can bring material UI stuff and this is a server component so everything's going to be rendered on the server I think that's awesome okay so now let's go uh to uh go a little bit more advanced so let's say I'm going to get rid of this and let's say I want to uh you know have a menu here you you know uh so how do we do this okay so let's come here to the components I'm going to create a new file and let's just call it main menu. ESX and we will create this okay like that and then I'll go back here and let's just do main menu cool so there you go our menu is coming and let's now uh stylize it okay so before we do that we're going to actually come and create a custom component for it so I'll come here over here to theme and this is where you can add your custom component so one thing I'll do is I will just set the typography and I'll do font family and it's going to be robot. style. font family like that all right with that done now let's go do components and then I can do something like Main menu frame component but wait a minute um we can't do that you see because it's giving error it's saying uh we can only specify components that exist within components so how do we do this well we can do this through something called the module augmentation and the way it works like this you you do declare module and I can do add mu material and do Styles okay like that then within it I can say interface components this material UI components interface and then we can add our uh main menu frame component to it and hopefully this should this should fix our problem compo N N I think that's my problem let's make sure sure we spell this correct okay I can do like this and there you go so that error is gone so let's refresh okay I think I need to save it boom all right we're in business all right so then we're going to do the style overrides just like how you do for any um component okay then I can do root right so then I can just set a width on it and I'll just do 250 pixel and and height of 400 pixel and I'm just going to do a couple more so here I'm saying you know a border I need to bring in the colors like that all right so we is simple CSS the only thing I'm uh changing the Border style so the top and bottom is going to be Ridge and the left and right is going to be solid I think that's what it means and that's the Border radius now that's exciting let's go ahead and use it and see it in action so come back here go to our main menu and see how we can use it here cool so let's come here and let's create a box okay it didn't bring it let's do it again there you go all right and then what I can do is I can do main menu frame okay but what the heck is main menu frame well this is where you come in and you are going to use it here so I can do const main menu frame okay and then I can do styled so this is the emotion thing now I want to inherit from box okay so I'm going to do box and then what you want to do is you want to give it a name so this is our now custom component that we made so I can do main menu frame component like that and Which slot we're going to do the root like that all right so with that done then you're going to come here like this and then we can supply theme if you want but if you don't want then just leave it and like this I know it's a kind of weird a lot of brackets and parentheses but that's how it is all right so now it's saying style blah blah blah is not defined so that's because uh you need to use a use client for this so this is where I can come here and I can use client and let's see voila there you go so now your um your custom component is coming how cool is this that's awesome all right so how about we um you know we're going to add since this is a menu we're going to be adding buttons here so let's set ourself up for that so for example if I can do button and let's say click me and let me add one one more and click me two all right so they're coming kind of side by side so now this is where you can just come here and so let's say you've created the base components and then we can modify it to um we can modify it even further so I can do Flex Flex direction of column and align items Center like that boom there you go and then I can also do justify content Center aha how cool is that all right so we're just going to give it some padding and I can do six pixel okay and let's do 8 pixel like that and then finally let's give it a gap of four all right so there's a little bit space all right so now these buttons are very ugly and the other problem is right now as you can see if I maximize my screen it's somewhere here I want it to be in the center okay so let's come here and fix this problem first where we put this right in the center so for this we go to global. CSS and the first thing I'm going to do is on my body I'm going to give it a full view height so that's one then I'm going to go to my page and I can do SX and let's just do a height of 100% like that okay then I can bring this to the next line and let's see if I can do this so I can do display of flex Flex X direction of column and we can do align items Center beautiful and justify content Center aha there you go so now everything is nicely centered so that's problem number one now problem number two is these buttons are so ugly that I don't want to look at it so why not go ahead and and fix this issue first so for this we go back to the theme and this is where we can create our custom button all right so I'm here and I'm going to come here and I'm going to say game button component okay like that we're going to do the same thingy style overrides all right so now it's complaining that well what the heck is game component button so this is where you come and just update our interface uh like so and everyone is happy so let me add some properties okay so this is that so let's add the button and then we can see it in action so if I come here uh as currently we're using the material UI buttons but I would like to use our custom buttons so for that let's just create a sign game button like that or just say menu button menu button. TSX like that and we're going to do this and we're going to do menu button boom like that all right so let's take this now and no let's leave it what I will do first is I'll do and I'll say const menu button equal to styled exactly like we did before it's going to inherit from button you want to do this because we want to be able to get the click handlers and all that cool stuff okay and then same deal we're going to give it a name it's going to be menu all right so okay so that's going to be a problem so let's do game button okay then can I come here and then do game name button so let's just do click me like that so so far nothing has happened because we're not using it I want to make sure we have named it correctly so I'll just go you know what let's just call it game button uh I'm going to copy it I'll go back to my theme yeah there you go so that's correct just pasted it for good measures so if I go to my menu now we're not using it so let's use it this cool exciting so I'll do game button uh what do we call it I'm going to change this to game button sorry for the confusion but yeah okay so if I do now game okay so something's not right we can't uh import the button let me save it I'll go to menu button game menu uh this will be called game button like that all right so what's going on export default function all right so export default function menu button so that's fine and let's see what's going on so if I come here I can do game menu button there you go if I'm going to save it all right so I think I renamed this to game menu I think in excitement so we're just going to leave it at men menu yeah so I shouldn't be changing these there you go so that fixes that uh and then if I go to my menu button that's the menu button and it says click me if I update it okay so that's gets updated all right so now let's stylize this button a bit because it looks boring okay so one thing I will do is I'm going to change the color and we'll do colors. white that's the font color boom that changes that's pretty cool all right so let's go to theme and let's fix this here okay so here I am going to come here and let's give it a border top and we are going to make it one pixel solid and let's do colors colors. lime green like that so there you go so that's your um one border and I'm going to do border left okay and then it's going to be the same story so we're going to do this okay like that okay and let's give it a background it's going to be colors. secondary I need to put a comma here okay let's do this so it's just to give it that shadow kind of effect okay now to create the there's so many ways of doing it but uh the way I found it is if you use clip path then you can do a pretty cool effect so I can do polygon okay and then so the way it works like this so you kind of go clockwise okay so what I'm saying is from the top I'm going to move for % in the x axis and the Y will be zero so just uh bear with me it's going to it's going to come alive and then we go to the next side I'm going to do 100% And then zero okay so that's coming and then I'm going to do for the next one 100% I'll explain it on once I write it 80% okay and then what I can do is I can say 94% and then 100% okay and then finally we do zero and 100% sorry one more and we do zero 20% okay so it took me a while to figure this out but there you go that's the kind of look what we're looking for so what we're seeing is 4% in the x axis and then y zero then you move here 100 100 so 100% And then Y is still zero then again you move you're at 100% in the x-axis but but we moved down 80% and then finally 94% in the x axis but Y is still 100 and like that so I hope you get the idea so that's how you do it now the other thing I want to do is on Hover you see how this comes I want I don't like this so the way you do this is you're going to come here you will do end hover okay and then what I do is I say border none so let's try this yes okay and we'll give it a background of colors do primary let's try this yes yes yes beautiful so we're done with the theme thingy and we don't need these I'm going to close all this all right and we're going to come here and let's change this a bit so what's going on here we'll save it and let's go ahead had now see the thing is I've hard coted the name it'll be nice if we can pass this so let's do two things the first thing is title title and also we need to be notified when the button is clicked so I can do on on button click okay so now we need to say what these are since we're using typescript so I can say titles of typ string and on button click is a function that returns a void now we need to be able to pass this back to whoever call so they know what button they clicked so I can say param string and then in here I can do title and then I can do on click is equal to on button click and you pass the param cool that's pretty cool all right so I think it's title like that okay so now now it's going to complain because like hey man Supply the stuff so we can say title I'll say new game wh and then we can say on button click and let's just do handle button click so now what is handle button click well that's going to be this and it's going to be param so let's for now just do console.log log parum like that and it's a string okay I'm going to save and there you go so if I go to my console new game great so that's working and now the beauty of this is I can come here and I can just copy this and I can do so let me quickly type this awesome so as you can see we got our buttons and I think that look they look fabulous it' be nice to give a this guy a little bit of a um box Shadow so that's going to be this guy and there's your box Shadow all right so now let's give this guy that background that I have in the in my thingy so for that I come over to public we'll create a new folder let's call it images and then I'll copy that and just paste it here okay so then we are going to set it here and the way I did it is no need to type it I'm sure you guys know this by now but what I have is basically a background and I'm saying a radial gradient of circle and from the middle to the outside and then provide the URL of the image so Boop there you go so that is that now it'll be nice to display the what button was clicked so I don't need this anymore so one thing you must be seeing is uh if I come here to my game button you see it doesn't have a used client but we are still able to do the on click and all that's because the main menu has a used client and it's just like passed on to these guys so that's why it's working okay so for that we can just quickly come here and do select ction set selection and we will do use state from react and then I can do here set selection to param like that I it's going to complain so what you do is just string or undefined I should fix that finally I will come here and I will typography variant let's just do H3 and let's just play this not not parent param sorry selection selection like that right so new game continue okay this thing is not in Center so how do we do this easy peasy just come here and flex Flex just so Flex Direction column okay and then we're going to do justify sorry align items Center and there you have it and you can also do for example text transform and I will do capitalize or you can do uppercase there you have it cool okay so I hope you guys learned something on how to use nextjs with material UI very powerful I mean I love material UI it's simple gets the work done uh but yeah so please like subscribe and share and I'll be back with another exciting tutorial

Channel: Grepsoft

Views: 7,486

Keywords: mui, mui5, nextjs, material ui with nextjs, install material ui, grepsoft, configure mui with nextjs, custom mui theme, styled mui components, mui nextjs error, mui createtheme

Id: DJtiToSVM6M

Length: 33min 20sec (2000 seconds)

Published: Thu Nov 23 2023