Material UI v.5 Tutorial | How to Style and Customize | Part 3

this video we're going to talk about how to style components inside of material ui so maybe there is a component you want to build out yourself something that doesn't really exist in the library itself we're going to check out how to do that how to apply styles to the components of material ui and then also we're going to check out how to actually customize existing components what kind of selectors you have and what is available what is possible even with a couple of examples in this tutorial so let's jump right into it so let's start how to actually style something custom from the ground up with material eye so after that we were gonna check out how to customize existing components but now it's really about how to style it from the beginning so we have four different ways of actually how to achieve that and um let's talk about all of them here we can see we have this uh rudimentary card here where we have direct styles applied essex styles we have a styled box and then inline styles so this is the sx style which you just take in here in this box components the box component comes from material ui itself and it's basically a diff um so we have this sx prop this is something new in the version 5 where we can use and apply pretty much let's say vanilla css with some perks then we have the styled box here where we use this style component from i think at the end of the day it's a style component library that material ui uses under the hood or it was before now i think it's emotion but it uses this styled method where we can have the first argument here the box then we can style it here then uh we have also a direct version of how to apply styles not all of the material ui components have that actually i think typography and box are one of the only ones where you can apply directly styles here as properties and then also we have the inline style which uses this html property style which is pretty much normal react and where we have this inline style object here where we have the styles so what are the differences and what would i recommend so let me talk about the differences right now and at the end of the i'm gonna tell you what i prefer of these methods how to style a component so we have here the font size for example this works for all the same um then also the background color also works for all the same same with width and height then we have the border that's also the same and then we come to the color where we have two different uh differences we have this primary main so this actually takes the color from the theme so if you remember in the last videos we talked about the theme so this takes the primary main color of the theme uh but first we have this uh breakpoint array so if you don't know this is uh from style components or emotion uh these are two uh libraries that use that where we have these brackets where the first breakpoint is this and then the second point break point and above uh uses whatever style we put in here here we can actually just add a string with primary main and it will work like that with the styled box it's a little bit differently so we don't have to break points with this array uh method let's say we have it um where we have access to the theme here we have exit access up here where we can target the theme palette primary and main and that's how we get our main color and then we have this team breakpoint so this is a little bit more like vanilla css um where we can target the theme breakpoint small and everything below small which is then blue so if we zoom out here a little bit you can see now the color change to our primary color which is this uh red so that's how it works then if you go to the inline style so if you remember that's the html property directly the inline style here this doesn't really work because primary main is nothing that we have accesses in in this inline style so that's one of the drawbacks of using that inline style here um then let's go further to the padding so we have the padding left here this is where the text is aligned so we can see it works all fine except the inline styles so here the two is actually not two pixels like it would be in inline styles it's actually the second index of our in the theme defined spacing so uh i think that's probably 24 pixels or something like that it doesn't really matter for this example but that's how we have access to that theme uh spacing breakpoint or the theme spacing index so how we access that here in the style is a little bit differently if we were just put two so let's do that uh for an example or as an example you can see now it's two pixels instead of uh the second index of our in the theme defined spacing so if we revert that we can see we access that with theme which again comes out from up here and then this spacing method where we put sec or two as the index so and then if you go here and we check out our our application we can see we have a hover state here then again in inline styles and direct this doesn't work so if you go here to direct there is no property hover so yeah that's just one of the drawbacks of adding styles directly also we don't have hover of course in the inline styles vanilla react does not have that but in the style box we have access to that with this selector and colon hover and then we can add whatever styles we want here in a new object uh pretty similar to or exactly the same as in the s6 styles then we have even this transition so if you however we can see we have this little transition um and that we will add that like this is a little bit specific to how we added it's a transition and then we have uh we convert that into a method so a function ah an arrow function where we have theme transition so the theme we will have access here if you add this arrow function and we create this transition for this property here we can even add different properties here where we had would have that transition but that's how it works that's just the syntax of material ui and say exact same thing below here so we can see with some of these methods or options available to us how to customize things in material ui some of them have real drawbacks like this direct and inline styles so what would i suggest so my suggestion is not really to use inline styles other than if you have like a very specific javascript logic that adds something with the style something here in in in the style property in the direct html style property and i will also not suggest to use these directly applied um props to the box component it's just yeah not really separation of concerns and also it makes the the component way bigger and it also has some drawbacks like with the hover or transition or stuff like that so i would really opt in to this sx style or to the styled box it really doesn't matter too much the biggest difference is how you actually use the break points um so i prefer this way of applying the breakpoints if you prefer a little bit more of the traditional css way you might prefer that option but at the end of the day it's really up to you what you want to use a little bit careful though you have to be with the specificity so we have here a styled box that we use with the style method then we apply an sx style to it and also as inline html element inline styles and then also here styles are directly applied to the component so i keep i'm giving you a couple of seconds to figure out or to guess what would be the background color of this element would it be blue green red or orange so did you make your guess let's check it out so it would of course be blue because the inline style has the biggest specificity of them all so uh if we go and delete that then it will be red so the sx is above for example the style box styles that we have here if we get rid of that it is actually green so the background color here so this has a higher specificity as the background color orange here and if you take that away then it will be orange and if you take that away then of course there is no background color anymore defined so yeah you have to be a little bit careful with the specificity especially if you use these styled uh elements in combination with um with the sx prop for example so by the way i'm a little bit fast on purpose so if this was a little bit fast for you to actually understand exactly how everything works the description or the the repo is linked in the description down below you can fork the project and play around with it yourself i think that's the best way to learn here i just want to give you a quick summary what exactly is possible with the stylings and yeah this is pretty much for you to now play around with again the description or the repos linked in the description down below so let's go into how to actually customize an existing component so we have here a component let me make that a little bit bigger which is actually a base component of material ui itself which is this input base which is uh yeah pretty much an input field um and we have these two versions how we styled them so if you go down here we have the styled input which is this one and we have this s6 style which is this one just quickly that's the input base with the essex style styled input so just a quick interruption i just want to mention that i started to offer consultant services so if you're in the react space or let's say react the next js material ui and you need some help with your project you can contact me and i can help you out in a consultation session especially for small teams i have quite a big discount so the descript or the details for that are in the description down below so yeah let's continue with the tutorial so how do we actually style because existing components in material ui because that's one of the most uh daunting things that we do in material ui which sometimes can be quite frustrating because it's not so straightforward it was even worse in the past version 4 and below but now version 5 it made it a little bit better better but let's check out how it actually works so we have this color blue here that works the same so we can see if we right here or even the placeholder is blue then we have access to this label um so that's one thing how you can target a specific element so if we go here and we inspect uh the component we can see so this is the grid itself that has nothing to do with the component itself and that's the first element of the input base component and then we can see it also has a child which is this input element so we can target that in different ways this component now does not have a label that but that would be uh one way how to uh target the label just to keep it in here so you have it as an example but uh if you would now want to target that that the input itself and not the wrapping element we would do it the following way we would add this n percent then space very important here then the class selector which of course is just a dot and then the ui input base input so where does this come from so again if you check it out here we can see that this wrapping element has a class material ui input base root and then this input has a class mui input base input so that's how we actually target this um this element so if you want to change something that is set here we would do it with this um with this selector keep in mind though that if you remove the space here for example you can see the styles are not applied so that's uh some of the drawbacks that you have working with material ui sometimes it's not so self-explanatory how you actually have to exactly use these selectors um yes sometimes you really just have to play around with adding a space adding no space um yes that's the only real thing i can give you there as a tip then again we have different ways of how we add styles here so here uh the palette background paper which is to say background paper as a string here but at the end of the day it's pretty much the same and of course the selector is the selector is also the same um as down below here in the sx style then the transition also works pretty similarly we have already seen that before that transition you can see the fading of this box shadow that we use also with this focus so you can add actually the focus state as you can see here again make sure to not have any spaces around here with the focus state also we can also add a hover state here as that so if you now hover over it we can also see it's not just like this border box or it does not just appear on focus but also on hover then sometimes we have styles that are applied if we have props set here for example this disabled so if you go to true here and add the disable style to it so you can see it's not clickable anymore it's uh also the opacity has been gone we can target that styles to only this state we can add this mu i uh disabled for example there are other properties as well so where do they come from so if you go here and inspect again we can see now that we have in our wrapping component an additional mui disabled class so that's how we target styles that we won't only want to apply in this specific state uh again if i add for example uh space here the style is not applied so be careful with how you apply style so that again sometimes you just play around and then you figure it out when it actually is applied can be frustrating sometimes but that's uh just how material ui works then the last thing i want to show you is that we have this double ampersand sometimes as well again you can check out this description and read about it here in the repo which again is linked in the description down below this is from a discussion or in stack overflow where we can see that this we have this double ampersand that has sometimes higher specificity as if just using the n percent so also sometimes if the style won't be applied and you can't figure out why try this double ampersand uh the reason of it is sometimes we have different states uh in our components that override the style that we have here so instead of writing uh something like that important um instead of writing that as we would in normal css this is sure really something you shouldn't use with material ui rather try the double ampersand and most of the time it will actually work uh just just a little heads up there so that was already it for this video again if it was a little bit fast i really encourage you to fork the repo and play around with uh with the example yourself sometimes as i said it can be a little bit daunting and frustrating if you want to customize existing components especially if they're more complex as just this one that has a div and an input html if you want to customize for example a card that has many different children's it's sometimes a little bit hard to do generally with material ui it is an opinionated component library so the more you want to customize it the more you actually going to fight the tool so you rather really think if you want to customize it or just keep the usually anyway good ux ui from material ui and use it as an opinionated tool instead of highly customizing it so this was already it if you liked the video if it did help you please leave it a like if you want to see more videos like that don't forget to subscribe see you in the next video [Music]

Channel: Sam Fromaway

Views: 42,189

Keywords: web development, javascript, online marketing, css, html, github, web design, illustration

Id: lWM23dOx6JI

Length: 18min 55sec (1135 seconds)

Published: Tue Jul 05 2022