Customizing the new Material UI

[Music] hey guys what's up so we're going to cover in this video the new version of material ui so there isn't a whole lot of stuff out there yet because it basically just got released not too long ago or updated i should say not released material ui has been in in in the business for a long time and it's always been a great great great uh html css framework and it's very common among react applications but it's not strictly made for react applications you can use it in angular you can use it basically even without a a javascript uh framework like react or angular of you or anybody like that you can use it just with plain javascript as well but it really goes well with um not that it really goes well but the documentation or the package that they made for react with material together it works really well so it's very common among react players and you know if you're any if you're like me i love react so um i use it a lot now the older material ui was a lot smaller than the new one the new one seems to be packed with a lot a lot more stuff and it's kind of putting bootstrap to a challenge because although bootstrap has also increased and has gotten better i think material i kind of went broke and just just just added like all kinds of stuff to it they just they just couldn't think of anything else to add to it so it's really good maybe a little heavy maybe a little bit bigger obviously but i don't think it's necessarily a bad thing i don't think it really is that much heavy although there are ways that you can slim down the the application that you're in the application that you can slim down the package that you're using so that you're not bringing in every single thing that you know that exists right you can just use um just used a few stuff in there so um i'm going to go ahead and get get ourselves started here that's now what i wanted to use all right so um first thing first get your visual studio code already opened up now we're gonna get ready to start i am not going to explain how to you know create a react application or or what apps or extensions i'm using a visual studio code i'm not gonna go over all that because otherwise this video is going to get extremely long and i wanted to keep it somewhat short but cover all of the basics of the new material ui5 or as is being rebranded mui just mui okay so if you need help with creating a react application and if you need help with um visual studio code and and how to put it together how to you know get these extensions that i'm using just look to my channel i'm going to possibly link the video somewhere down here in the screen for the for how to create a react application and things like that um or if i don't forget i probably you know just just look at just look for it and and they use that use that to find your way around okay but so we'll keep this just very short and sweet just for mui five only okay and but also also i am not going to explain the entire mui5 there is a lot of components out there so you kind of do have to do your own plane but i am mostly particularly going to go over the breakdown how to put it together and how to use your theme so that you can use it for your use it and then customize it to your fitting because it really serves you no no purpose to use a css or html framework if you're not going to customize it then it's going to look just like what they have in their site you know the default values and you don't want that so this is what i'm really going to do here is what i'm going to to teach you how to get the mui design and then change it around to make it fit your purpose okay all right so let's get started so first thing that we want to do is we want to come over here and we're going to create a new application so um i'm going to go to my terminal and i'm going to say well first of all i want to know where i am so let's open a a new folder open folder and let's go to my folder my training room here that i use uh yeah and i'm gonna create a new folder here i'm gonna call it mui all right that's done and i'm going to open it all right it's going to take a few seconds close this right here all right so i am already in my mui folder in here i'm going to come in here and i'm going to create my react application so mpx to install my package all together from npm and that's going to be create react app and i think they have and that's maybe a cra an acronym for this like a small like shorthand i don't know all right and i'm going to call it this short and simple i'm going to call it muy uh muy app mui app it doesn't matter what you call it really and i'm going to go ahead and let it do its thing and it's going to go through in the motions motions of the oceans [Music] all right and if you don't want to look at my face while this is going on you can go ahead and fast forward a little bit but um what's not to look at all right i can have some coffee all right so i don't know why that's taking so long it should not take that long i might have some kind of update in my computer that is probably running in the back and it's making things a little slower than usual but normally it's really fast it looks almost about done all right cool so it created uh if you shouldn't have any problems creating a react application it's pretty straightforward just like it is right now if you do have any problems or figuring out what to do uh like i said you can go to my videos and figure it out but you can just go directly to the react application and figure out how to create a new react application so anyway it says here now to cd into the app and then you know and then do an npm start to run it in the browser so what we're going to do is we actually i'm going to see the entry yes and we tab so i can go straight into it and then once i'm there i'm actually going to put code space dot reason why i want to do that is because i want to open it in its own you see how this is at that folder level i want to be at that mui app level so i can just close that one in the back now because i don't need it anymore and i'm going to use this one reason why is because i can see my my root structure here you know i can see all my folders and stuff like that so close that search all right cool so now that i'm here i am going to go back in there again to my terminal if you're having problems accessing this terminal go into your extensions here and make sure that you have the extensions that you need and there is another video that i have for this like i said if not then you may not have it i don't know maybe i don't know maybe it's it's just default right now for visual studio i don't know all right so we're there now and i'm there and i'm at the root level so i'm going to npm run start to run the application if you're wondering why i'm doing that ymp and run start because that's what it says see if this is an this is npn run and then this is the script to start the application i said i wasn't going to explain this oh well all right so i started the development service server and i already have the browser already started somewhere else in my other screen so yeah there you go this is the normal application so i'm gonna get rid of all this stuff in here um because i don't want this to be in the way um so just bear with me and just pause as much as you have to so what do we have here so in the app.js so i'm not going to use the logo and i'm not going to use this either and i'm not going to use basically anything in here so i'm going to get rid of that get rid of all that crap and save it and since i'm not going to use it i'm going to delete it from here as well and i'm going to delete that logo and this index see it says i am going to delete what's in there because i don't want to conflict with the styles that are going to come in from material ui so i don't want any conflict in there and in the indus js this is just comments that i usually leave out in case i have to go in there so just say that what else we have here all right so i think that's about it all right so now let's see first if we are in the right place here so i'm going to click hello and save it and i should have a nice hello showing up here anytime soon maybe i have to refresh there you go hello so it's working so first thing i'm going to do is i like using um classless components so i am going to transform this into a classless component but this is really what i just did is no different than just using a function component you know but i like to use classless components so it shouldn't matter either way you use all right so now that i have that now that i have that the one thing that i do want to use is i want to use some components in here and basic components nothing crazy and the reason why i want to do that is because i want you to see that the changes that i make global are actually working in two separate components right in the app component which is the main component and the component that i'm going to inject in there which is going to be a test component or like a page component or something like that so i want you to see that it is that it does affect the application globally and then it's not just localized changed okay so what i'm going to do is add the source level right here i'm going to open a new folder and i'm going to call it components components yep that's right and inside that component i am going to then create a new component and i'm going to call it um component now that's to page home page let's let's call it home page let's call it a card because i think i'm going to use a card card card uh main card image card image card image card gis make sure that i have that right image card js perfect all right so now that i have my component created i'm going to create a afc okay so if you don't know what i'm doing here this short hand right here um make sure that you have um go again through my extensions and see everything that i have in there and there is an extension that i forgot the name of it but there is an extension in there that you can use these shortcuts that i'm using right here to create a bunch of code that you don't have to type manually so like this our afce is basically a react arrow function export component and it basically spits out this that you see here which is a very already you know it's already built together and makes it a lot easier for me to use so i click that and you can see it brings even the name of the component it brings it all together so it's awesome all right so now to make sure that this is working i am going to say hello from image card and i'm going to save that and i'm going to go to my app.js and i'm going to import it there import image card right there from from components image card so that's good and then i'm going to come down here image card save it and boom there you go hello and hello from image card so i have this coming in from this file from this js and i have this right here coming in from image card close that all right cool so now that i have that i need to start adding some css some content right something to it right so let's go to let's start uh working with um let's go to the um to the application now to mbm ui so mui.com go to mui.com so you can see basically the um the boilerplate that we're gonna work with the framework that we're gonna work with and when you click on don't yeah let me go back don't pay too much attention to this because that's not really what you're going to be importing it right get to this get started right here and it'll tell you it'll start telling you what you need to do to for the installation go to the installation right here and then you're gonna see that you need to install this this stuff right here okay which is right but there is more to it but we're gonna start with this so copy this right here and get back to your application and then in here just click that so you can get another screen that way you can have you can have the server still running and you don't have to stop it and then in here just paste that npm install and ui material which installs the material uh framework emotion react which is i'm not gonna go into a rabbit hole with this but emotion is kind of like its own package inside material let's just go with it and it's basically this one is serving specifically for react and this one is an emotion styled so just do that and just because i know you're going to need this i'm going to cut you some you know save you some of the footwork of what you're going to need um because you're gonna need a little bit more than this i don't know why they don't add it directly on the page on this website they should just basically add it right there but they don't um so i'm going to tell you what it is you see what it says styles legacy i'm going to click on that go to basics and then there's this one right here mui styles you're going to need that one as well so put that in there and then the last one you're going to need is going to be in the components and the icons because chances are you're going to use icons and you're going to do this mui icon material and you're going to add that to the back of that as well and then the last thing is going to be dash dash save so it saves into your um dependencies and they are ready to be used you know basically package them together when everything is get put together so go ahead and hit enter and it saves and this like i said it's going to install everything that you're going to need in order to run material ui and design it and customize it template it do whatever you want to do with it all right so it's done you should be done as well it's a pretty easy pretty fast straightforward information there all right so now that we have access to that what the hell all right so now that we have access to that we're gonna start now creating some themes okay but before i create some things we need to we need something to style right so we're gonna need actually some html so i said i was gonna use a card so let's go down here to the card and you can see here look at this look at this component look how many components they're bringing you know for you to use i mean this is incredible it's huge anyway so let's go to card card card card right here and i'm gonna grab a card from here so this is the normal card this one is online with the needle it's got a variant on it uh like you see here variant online so this is the html that you would need for a normal card that just be this that you have there let's use a little bit some all right so media this one all right so let's use what's the difference okay i don't see the difference in these two right here but i'm not gonna go too much into the stuff so let's use one of these only because it has buttons in here so we can work with that as well so i'm going to click on the code thing there and i'm going to bring in this entire card html there and then i'm gonna go to my image card and i'm going to replace that div with my card now you can start seeing already that there's going to be some issues here it's because this is not html this card right here that's not an actual html tag okay that is a component call okay you're making a call to a component called card so therefore you have to import that component so it knows that you're making a call to that component with these properties or whatever right so i'm going to import card from material uh is this the actual one let's see yeah from material okay and then i'm going to go ahead and add these if you notice these right here they actually calling card from material card car action for material car action the car content from material so they're spreading everything separately i don't like doing that i'd rather just basically come over here and then as long as it's in between squarely brackets you can you can put it in there and separate them by commas and they are all being you're basically importing the entire mui material but you're not you're making calls to this specific section to specific components that are inside of ui material so don't be afraid to use it this way all right leave a little space in there let's do that one what else car actions and then the last one is going to be button cool all right so now if i hit save and i go over here i should have an image card with nothing in it i mean not nothing but no image in it so all right so we're missing the listen the lizard the iguana so what we're going to do is i'm going to right click on the image and open image a new tab and get it right here and i'm going to save image as and i'm going to go to that mui folder that i have this emu what my application is i'm going to open the application i'm going to open the src folder and then right here i'm going to create a new folder i'm going to call it assets and then i'm going to create another folder inside there and i'm going to call it images and then that's it this is whatever i want to call it i can call it content play the red type and call it whatever iguana whatever you want to call it that one is fine and i'm going to save it and i can close that tab now so if you can see now i have an assets here with an image folder and then that right so i'm going to import that image so i'm going to say import and i'm going to call it um i'm going to call it iguana and that's going to come from one more step back there you go acids images contemplating contemplative red tile there you go i'm going to highlight that and i'm going to find that image right there and i'm going to delete this and in between squarely brackets and i'm going to put iguana because what i'm doing is i'm i'm injecting this is why you see the squarely brackets i'm injecting a reference to this import i'm telling a pudding here whatever is being imported here and then it's gonna go fetch it here and that's how it basically travels all the way over here okay so if i hit save now i should be able to see my lizard all right um this is x right here let's talk about that a little bit so what is that sx so in the introduction of this mui system that they have now this mui5 or material ui they created this property right here for styling right which is basically a prop that you can add any inline styles that you want um to your application but careful you can use something like this you can use something like that okay as you would with normal html styling that will create an error because it's not supposed to be this way it's supposed to be when you're working with jsx you're supposed to use camel camel casing camo casing yes camo casing sorry uh camel casing so you have to use it this way any numbers any integers you can leave them like this but if you want it to be for example say for example you're going to add a padding and the padding is going to have two different measures like 10 pixels by 20 pixels you can do this okay you can do that if you're gonna if you're gonna break that down like this then you actually have to turn it into a string and put 10 pixels and 20 pixels then you actually have to do it this way okay and i'll show you if i do that then you can see the padding now it's adding the padding 10 pixels on the top and then 20 pixels on the side okay but if you're just only gonna use one pixel all around you can use padding 20 and it just adds now padding 20 to everything like that so it's going to use different thing i think this is rems let me see right click on that let's look at it patty patty padding padding not right here 160. okay so so it's uses a different way of rating these things right here and we're going to go over that a little bit and then actually let's go over that right now so let's go to the sx prop right here so the best way to find it is just type in sx and then here the sx prop and it'll teach you here what the sx prop is and how to use it so it's part of the mui system and it's great to use because it has a lot of shorthand that you can use and automatically adds a lot of stuff to your code that you can use while you're in on in-line styling mode okay not globally something you're gonna use to that particular tile on that particular one right there that we're using and you can see some examples here of how to use it and things like that and then how do you know what to use you can basically come down here you can see the prop that you can call so if you want to use a margin you can just use m so in this case because i am going to actually use this the correct way you see how it's really stuck to the word hello up there i'm actually going to use that now i'm going to put m2 4 and that's going to bring a margin top down by four measures of whatever that is and there is a there is a calculation of what these numbers are four is not exactly four pixels it's like four units i don't know that's weird um in this case it's 32 i think yeah 32. so i think it's multiplied by 8 maybe for some reason i don't know why so you can use mt for margin top and r for margin right and so on so forth and then you have the paddings over here things like that and so there's a bunch of stuff that you can do with this excess ssx so there it is all right all right so let's continue let's move it on all right so now i'm going to use another component on the app.js right here so i don't have this hello here and the reason why i want to add another component up here because i want you to see like i said at the beginning i want you to see two components being updated at a global stage okay so getting back to here i'm gonna use a nav bar up there like or an app bar is what um react to not react um and that bar is what the um mui material ui calls it navbar is what bootstrap calls it so here's the app bar and we can use let's just use yeah let's just use uh yeah let's just use a normal one nothing nothing major not no big deal all right so we're going to go to this box right here and we're going to go to the app.js and we're going to add it in there where hello is get some spacing and now you can see now that of course you have to start adding some of the stuff in there so we're gonna import uh this box right there from nope not that one from material there you go and now we can start adding the rest of the stuff so the app bar and the toolbar and the icon button and the nope not the menu icon we'll wait on that one typography and button boom now we're gonna import the md icon what's called menu menu icon right there from [Music] icons material i think let me make sure for sure i can material to the menu icon it's gonna come from maybe i make okay and then you're gonna specify which one out of all the menu and you know from menu there you go so the menu wagon is gonna come from there cool so i'm going to hit save on that and error what a miss mui material all right let's let's look at let's see what we got here all right check to check the app for what er the element type is invalid expect string for building components what is he talking about oh because the menu icon doesn't go into i mean if you wanted to if you do it like this it will work i believe because you're not specifying the actual menu but then you will have to call it menu now menu icon all right so it's this way but without the and then it'll work compiling compiling compiling all right come on now there it is cool so it worked all right so now so here's the thing that i want you to do because we're about to get into the theming part this is what i want you to pay attention to here you see how this blue right here and this blue right here are just you know you can tell right it's usually blue so that's the primary uh color that it's using so if you look at this app bar here for example um you should have a primary and the button okay it doesn't but that's because it's by default so let's check on that actually let me let me close let me close this let me close this all right so let's go to uh we're already in the app bar right so let's go down to the api down here of the app bar and let's look at it and you can see there you go so you can see the props for the ad bar that the color you can use all of these colors in the add bar right here you can use primary secondary transparent whatever you can use a bunch of different things but by default it's going to be primary and that's why it's already blue okay so you don't have to actually specify to be primary it's going it's going to be primary by default okay if we look at the button that we're using here by clicking on the button i can see that the color again you can use these colors that you if you want to use but the default is going to be primary and that's why you see that they are blue and the background okay the background which is the variant is going to be text which is why you see it right here without an actual button looking which it looks more like just the text okay if i wanted to change that to to look like anything different then i could make those um those changes like i could call it um variant what was it contained for example oh that's that's this one that's this one that's the login let's just let's just get rid of that let's go to the image card we're here we're on the share here right so variant contained and now if i do that now it shows it like these buttons did the contained ones uh so just to see just to show you what i mean let's go to the actual component and you know like that this is the basic button which is this is the text this is the container this is the outlined these are the three different variants that it comes with you know um let's use a different kind of button for for the sake of you know for the nature of it we're gonna use um the fab and the reason why i want to use a different button is because i want you to see later the difference between a button and a fab button so i'm going to go ahead and first of all i'm going to come up here and i'm going to change that for a fab because i'm not going to use button in this component i'm going to use a fab instead and then i'm going to come right here and change that to fab i'm going to get rid of this con variant because i'm not going to use that anymore and i'm going to hit enter and i'm going to get that thing then normally it comes round by default so if i go to fab just going to be a couple more stuff that i need to get what i'm looking to get out of it where is it man they have gotten they have made this thing so big it's hard to find anything fab fat fat fat fat fab okay i'll find it like this there you go uh right there so there is a variant called extended so i'm gonna use that variant and i'm gonna use that variant to extend it and then now they're used like this okay and then another thing i'm gonna do is because i wanted to be i wanted to look different right because i'm going to add a color to it i'm gonna make one primary and the other one secondary so i'm going to grab this one right here and i'm going to make it a color um [Music] primary and then this one is going to be color secondary and there you go now i have my primary and my secondary color which in this case they are automatically by default there's going to be blue and purple okay so that's the way that material you are these are the colors of material why it comes from out of the box with okay and you can if you like this colors and this is all you want then you're good to go but imagine if you had to build a bunch of applications for different clients or customers or for your job and then you everything that you made was blue and purple not really good right um so you have to have different ways you have to have the ability to theme your application and turn things into different colors so we're going to get into the theming part now and see how we can do this so the first thing that i'm going to do in order to change things around is i am going to come over here into my assets folder right there and i'm going to create and add a new file and i'm going to call it theme js and i'm going to not can i'm not going to camel case this one i'm going to put it in regular small letters because it's going to be somewhat of a configuration type of javascript file okay so whenever i want to use a file for specific configurations of things i usually leave it like that like an api file i put api.js settings.js config.js all of that stuff i leave it with small letters right on the undercast so i hit enter and then the first thing i'm going to do here is i'm going to create a const variable and i'm going to call it theme and what was that uh and then in that theme i'm actually going to actually you know what i'm starting backwards so the first thing i want to do basically is i want to import create i want you to see it from here there there you go create theme from material all right so i'm going to import this because this is the um the um the function of the package of the component this is the component that material ui has provided for you for you to create a theme of your own all right so with the with creating this with the create theme you can start creating different colors now here's the thing when you want not everybody is really good at picking out colors and and understanding what goes with where with what and all of this stuff so if you go to the documentation again and you look for um and close this it's a customization yeah if you come here and you look for color there you go you can see here how the documentation already gives you some ideas of what you know colors and contrast between colors and things like that okay and it also gives you this right here that i was actually just talking about of how to create a theme and all of this good stuff right here now this right here the playground this is really actually pretty cool because this actually allows you to move around from colors and do primary and a secondary color and then mess around with it to see you know what you will like and things like that and then just change it around so this is what you like for example if this is the combination that you want to do something like that for example something like this then all basically you have to do is just copy this code in here and you're already on your way okay so um but if not then you can always do it yourself but let's go ahead and do it um start with something here so i'm going to grab this gun's theme in here for example i'm going to grab that and clip copy and paste it here so what i'm doing here is basically i'm creating a theme that i'm storing inside of this variable called theme because i'm going to use that somewhere else later but basically what this is going to hold is all of the settings that are inside of my create theme in here which are this right here and then some more that we're going to add okay so the first thing that you're going to do is you're going to set up a palette okay so the palette is like i said this right here like how do you want which one you want to be your primary colors and your secondary colors and all that so if you want to know what your palettes are or what they should be if you go to give me moment where is it this color palette no that's not it that's a good okay that i'm gonna look oh hey look right there all right so if you go to the palette you can tell already what is it that you're going to need and what is it that comes with um out of the box from from material wise so as you can see the primary color these are the primary color this is the the main primary color which is the one that you're seeing up here and they also have specifications for the light primary on a dark primary so these right here in the middle are going to be your primary secondary error warning info all of that right and success and then for every color that they have they have a lighter version and a darker version and these are all default the default values these right here are the default values for um for these particular colors and the palette that material ui already defined for you but you're not going to use these you're going to change them so how do you change them is by creating this right here and how do you know what to put inside of this right here is basically exactly what you see the name here so if you wanted to change for example let's say you like all of these but you don't like the palette warning warning dark let's say you don't like this color right here and you want to change this one palette warning dark palette warning dark that's how you change it and then in here you change it to whatever color you want let's just make it black that's weird but sure why not so there you go so now next time you use your warning a warning button and you specify that you want to use the dark warning button it's going to be a black button okay so we're not going to use that so that's just to show you how to how to change the color so this is how we're changing the main color we're changing this main color which is blue right now to this purple 500 now what does that mean what does that purple 500 mean well in order for you to do that you're gonna have to bring in your colors um actually in this case it's going to be purple from mui material colors and your material colors alright so um just to show you you can see right here for example they're importing this blue right here from mui material colors blue but we're gonna use more than one right we're gonna use uh we're gonna stop it right here we're gonna get rid of the blue i'm gonna stop it right here so that we can start bringing more than just one color so in this case we'll bring in purple but we're also going to bring um say orange and we're also going to bring red i don't know let's just bring a bunch you can see already that once you start bringing in colors it tells you already it helps you out this is visual studio doing this okay this is not react this is not material ui this is visual studio helping you out so again this has to do with checking out your my extensions and you know to help you out when you're developing but this is your main colors that you're going to use and then what i want what i like to do is i like to create um variables if you will for these colors so i don't have to use them the way that they call it themselves so like for example and so i can specify which specific shade of that color i want to use so let's say for example for my primary color i'm going to call it primary color for my primary color and i like using whenever i'm using any kind of variables i'm naming my variables in camel case because that's just the convention the the best way to use conventions uh naming conventions so my primary color i'm going to use purple and which specific shade of purple is going to be well let's see which one do i like so let's go back to color and let's go see and here's the purple so how do you know what to call i mean purple when i'm magenta how do you know the color which color exists and which color doesn't exist you know i don't think there is a magenta there is a magenta right now you could get to a magenta why would a magenta even look like this yeah you could get to the magenta or something like that from targeting the family of the purples so this is what you do this is the name you import and this is the variation of the hue for that particular color so in this case let's say i want to use this this one right here this this particular purple i'm going to use purple 600 so from here i'm going to use purple 600 what was it here purple 600 and then now here where i'm basically calling that name you know by deep uh you know and directly like that i'm actually gonna call this primary color that i just um that i just created and i call it this way so i'm defining it up here storing it there and then changing it here now you're thinking now why what's the difference between this or the way that i had it before nothing no difference it would work the same way but when you store it inside of a inside of a variable you can make the change on it in one place instead of in a bunch of places later on as your application grows so like let's say for example that this was actually a lot larger than just these six or seven lines of code let's say this thing was huge and it had like hundreds of lines of code with hundreds of different styles and you're targeting this primary color in 25 40 50 100 places if you had this directly into each one of those values you will have to change it and you needed to change it to like a purple 700 then you had to change that and everywhere else as opposed to if you have it this way then you only have to change it here and it would automatically change the value for that primary color variable which is named in the other 50 to 100 places that you named it so that's why i like doing it this way that's why everybody should do it this way so i'm going to create a couple more and i'm going to call this one secondary color and my secondary color is going to be my orange and for that orange i'm going to use where are the oranges this is the orange i'm gonna use um i don't know 500 um yeah sure 600. yeah i'm going to use 600 too i'm gonna leave it at 600. all right um 500 yeah 500. i'm gonna use 500. all right and then the next one the next one is going to be my danger color what the hell did i do danger color and that one is going to use my red and this one is going to come what did i have 900 900 so that one is going to use this dark dark one right here this red 900 right here i wanted to be a little more intense i don't know why i don't think i'm that mad it doesn't matter all right so i'm going to call this secondary color and i'm going to call it in here now remember don't use it like this if you use it like this and you're using it as a string which means that it's going to actually look for a color name secondary color which doesn't exist what you want to do is it's a variable that contains a value of this in it okay so you want to use it like that and then now then your color so how do i know what is going to be the next so what ternary what do i call the next value in the palette ternary well let's let's see what's in there so let's look at the palette and let's see what the palette colors are and it tells you right here you have primary secondary error warning info and success so those are the values that you can use in this case it will be error so i'm gonna put my error is going to and then from my main because i don't want the dark or the light i want the actual main i got a little ahead of myself there you go and that one is going to use danger color cool all right so now you can see that i have uh defined already my palette to have a new primary main and new secondary main and a new error made so that's going to change the colors here so when i check one and then obviously i have to export this because otherwise i can't use it anywhere else so export default theme whoa export default theme and i hit enter and then once i it refreshes what do you think it should happen why it didn't change ah because we had created the file but we're not really telling react to use it anywhere right so now is where we actually get to apply this stuff so the next thing we're going to do is we're going to go to excuse me to the app folder right here and let's just minimize this stuff and a couple of things that i'm going to do so these components right here i usually like to keep in i like keeping these components uh in the bottom this one's um not not my component that i create is you know you know actually the the components form you know like this component buttons and you know the actual building components the building pieces i like to leave this stuff like um at the bottom of all my imports so that they're easy to find because you know you're going to have clients or you're going to have um your boss or whatever that after you created a bunch of stuff it's going to tell you oh you know what i don't really want buttons can you take those buttons out can you add a different button instead you know and then now you're just gonna have to start moving things around and so instead of you know you can just go straight to the bottom and you know that they're all gonna be there and you can just change them there so that's why i'm making this space here because i like to keep the keep those in the bottom i put my stuff in the top so now we're going to we're going to import a couple of things here first thing we're going to import is going to be the theme provider which is from here from material the thing provided for material and then the next thing is going to be the theme from [Music] you know the thing that we created from assets theme right there cool so now that we created that we're going to now use this theme provider and we're going to wrap the entire application with it cut that part out go to the bottom put it there and then we're going to say for my theme use the theme okay so this part is gonna be a little confusing to you you're probably thinking what the hell's a theme equals a theme you know that's what's going on here basically this is basically saying to the theme provider component from from material ui to that you're going to use a theme and this is the name of the theme that you are using okay because this is kind of confusing and i can see how this this turns into a problem when you want to you know when you want to name things it's never really a good idea to name things the same name as your prop uh that's why i like to keep things named a little different so for just for the sake of seeing how this works and seeing the difference i'm going to use custom theme here i'm going to name my import custom theme name it as well there custom theme and then obviously for that to happen i have to come over here and oh look at that it's starting to change and i'm gonna put custom thing in here and custom theme in here all right so as you can see you see the changes already you know that that we're working with the primary num color is no longer blue and the secondary is no longer purple it's now purple and orange okay so you can see the changes are already happening and you can see that it's happening globally because the nav part here the app or whatever this is called this is actually in the um in the app js file in here this is in here right this is all this right here and then this card right here with these these buttons is inside of this image card right here so it is being it is affecting globally which is the good thing about what we're trying to do here but that's not enough you don't want to just be able to just change colors because although that's great yeah you should be able to you should want to know how to create colors and change colors um you should be able to do a little bit more than just that you should be able to actually for example change like in this particular example right you see how when you hover the share gets a little darker and you can still read it and it's fine when you hover over the secondary button right here you can see how the the the color goes a little dark it goes dark and then you can really tell anymore because it's a good color for the for the normal one but not a good color for the hover so you got to change this stuff okay and how do you change that is by making a better use of this theme by targeting specific items and not that specific button itself but those buttons that are consistent in color and shape and type of button if that will it you know you will so how we're going to do that well let's go ahead and see what what's being used in there if we inspect this we're gonna see here these classes right here so copy those classes and let's just come over here just so we can see what we're working with and just hit a new line here at every beginning of mui and you don't need this last ones and this tells you right here which this tells you right here the composition of this particular button on how it's being composed by material ui so first of all you're gonna see that it's using the mui button base right so what does that mean is it means that it is at a small at its most um [Music] overall not overall at its most um larger scope it's larger scope it is a button right so do you want to make the change at this type of scope no because then whatever you do there let's say for example you want the text to be white if you do it at this level then that's going to make every button text white not just these these particular buttons but every button that you have in this one which is fine because that's wide already but it's going to make every button white you don't want that so you want to get rid of that you know you're not using that fab okay so now we're narrowing down now it's not just every button but every button rounded every rounded button that's what fabs are fats are the type of button that is rounded like a pill so do you want to do it at this level not really because this will make every button um that is surrounded it will make it also um white as well and that may not be a good idea because say you were doing the background for example you know then you're going to make changes on both of these buttons at the same time you don't want to do that you want to make changes only on the buttons that are um orange right those are the ones that are having a problem those are the ones that the concerning ones it's not this one the concerned ones the concern buttons are the ones that are orange right so maybe not all fat buttons the extended ones okay maybe not either because that's also going to affect this one as well so you see what i'm going with size small again this is also size you don't want to change all of the size ones all of the size small ones and then we have this the mu fab secondary now we're getting somewhere so now you're going to make if you make a change to this particular prop you're going to make a change to all of those fab buttons that have a secondary variant like in this one so that will work because that will make all of these orange fab buttons you know change to whatever you want to change so that's how you do it so basically this is this that was just an overall a breakdown that was just a breakdown of how you can tell what you need to change at what level so that you don't make changes that you eventually go into um conflict with other stuff that you shouldn't change but the right way to do that is if you go to the fab buttons right here oh my god trying to find that again let's just do this fab component if you go to the component and you go down to the api and click on that okay if you go down to the css part you get to see all of that that i just that i just spoke you can that i just told you about that i just spoke um you can see the this is the this right here this rule name is what you use to um to target this particular classes that i just saw so if i want to target all of the mu mui five roots this is the rule name that i will be using or that i will be overwriting and if i want to change all of the second theme you fab secondary this is what i want to use and so forth okay so how are you going to change that stuff and if is let's go again to see another example in customization and in theming and it'll show you [Music] let's look for the actual how to customize overwriting overwriting css variables i'm trying to find the one that you're it's it's hard to find it anywhere and this uh the documentation is so good but it's so big global styles all right let's see let me see what i want to find it as let's look the style overrides yeah right here so what was this styled styled okay so look for this styled it's in system that's what it is so if you go to system and you go to styled then you're going to see just go down here who says style overwrites is what you're looking for basically and right here global style overrides so this is how you override an actual component that you want that you don't like the way that it came from material ui and you want it to look different because it you know should fit your application right so what you're gonna do is you're gonna grab this right here and you're gonna head over to your you can get rid of this guy here because that was just uh for explaining underneath your palette you're gonna copy and paste i'm gonna paste that let's get rid of these comments here for now and this right here the first thing you want to do is target the component that you're going to be using right so in order to figure out how to you know work what we're going to go back to the fab component um which is css global theme overriding overriding how to customize the things fab there you go css all right and then first thing you want to know is you're going to figure out which component you you're changing which is the mufab you can see that everything is it's it's pretty much you know tells you which component you're using you're changing so emifab mui fab so i am going to change this to mui fab because that's what i'm changing the mui fab then this right here it's basically an instruction for these rule sets these theme rule sets that it basically saying hey i want to override the style for this mui fab okay now if you make an overall um a route if you make a route change if you make a change inside here it's going to it's going to apply to all of the fab buttons this is why i said about being careful about what you override because if you do it at the root level you're going to change all of them so just to explain i am going to do a background background color yeah background color and i'm gonna make it red and if i hit save oh it didn't tell why didn't it start all right oh i missed um okay sorry so i missed something here so first thing is you are doing not a palette anymore you're doing components you're changing the components now yep all right components components okay so there you go you see because i changed the root level it changed all of the fab buttons see that let's do some more changes here so we can see let's get rid of this size here so that it's a regular size actually you know what no let's make it size large is there even a size large um let me see size yeah large yeah size large all right so now that i made a different size there's going to be changes here right so look at this at the root level i want i changed the i added the property at the root level that made that made every fat button red bad bad juju right should have not done that and so okay so what do i need to do then let me see what if i do it at d let's look for the size size small which is going to be this let's do it at the size small level then okay that gave me back my purple over here which is good but now this is affecting all of the size small so if i had another primary so if i had another primary color here that was also small is still going to be red even though it is a primary color because i am targeting this size small so i'm not so i'm so this one was untouched because this is not small but i'm still changing everything that is small so you see how it's you know so what is it that i'm really really targeting here i only want to target this guy because this is the secondary one so now if i put secondary then i am now affecting only this one so now the primaries will remain purple even regardless of the size regardless of anything i am basically pinpointing the changes to the particular type of component that i want to change so i can go ahead and change that back to normal and put everything the way it was and put everything the way it was and there it is and then now i can just do what i actually wanted to do which is change and go ahead and delete this now that i know that i can change that by adding something here then i can do what i actually want to do which is change the color of the text to white when i hover and now that's going to be a little tricky because this is something that you may not have seen before you got to add it in as a string and then you got to add this in there to make it even weirder and then you're going to add this regular pseudo class from css hover so that part is going to be a little tricky but that's how it's done and then now and there oops i mean i don't want that to be an issue and then now in there then i can say that i want that color to be white so what i'm saying here is on on the components on i want to change my components i want to change the fab components but and then i want to override the styles but not just all fab components just the ones that are secondary the orange ones the purple ones are fine okay regardless of size regardless of what they are but not just all secondary natural states of of those fat buttons but the hover state so i'm going to add this instruction here and then what is it that i'm doing to it that i'm changing the color to white so as you can see it's black but when i save then now it's white when i hover over it and that's basically how the cookie crumbles okay so this basically shows you how do you change components you have if you wanted to change any other components like the add part right here then you basically just do the same thing you just come over here to the meui app bar there you go and you know what to do from here you gotta open that up and then you gotta do the style of rights you gotta do the style of the rights and then do whatever it is that you need to do most likely if you want to change the color it's going to be at the root level so um and i'm going on a whim here i'm gonna guess but if i have any any doubts i can look for this css part and this rule names and global classes and all that at that place so i just look for the app bar wherever it may be up here i'll look for the ad bar and i go down to find this right here okay so yeah i was right it is at the root and here it is so at the root i'm going to make sure i don't like this or purple one for example i can go ahead and put background background yep background and i wanna name that uh danger color so that's not going to be a string then and there you go now i have a red red uh navbar or add bar or whatever you want to call it so that's basically how you change it if i want that also if another thing that i want to do to it is i want to make sure that that it has a margin bottom a margin bottom of 50 then i can do that and it adds 50 pixels more to the bottom so now what that does again is that every time i use an app bar from now on every app bar that i use no matter where i use it it's always going to be red and it's always going to have 50 pixels attached to it at the bottom of it so remember this right here are global changes so this that i just did right now to the app bar may not be smart because that's i may want to use an app bar somewhere else and i may not want it to be red with 50 pixels on the bottom but this is just for explaining what i'm doing okay explaining how it works all right guys so that's all i have i mean i think what i cover is actually pretty good because you can you can build on this and you can make this really customizable all right so have fun with it try it out and leave me some comments in the comments and let me know how it works all right and don't forget to you know do the whole you know subscription thing or whatever it is that the kids are doing these days i don't really care i'm just i'm just hear the teacher alright have a good one guys

Channel: codingNerd

Views: 8,151

Keywords:

Id: EyqpbNgrW3o

Length: 72min 32sec (4352 seconds)

Published: Thu Oct 28 2021