Customization of MUI Components and Theme

what's up YouTube welcome to quarter fiction this is the second video in this series of complete react material UI tutorial here we learn all about MIDI del UI through building a complete react app from scratch in this video we will discuss how to customize material UI components and theme with the help of our sample project in previous video we have covered material UI basics package installation material ey grid and styling components with JSS index if you have involved that video already please watch that force link is given in video description and inside the first comment of this video from next video onwards we will start adding new features into the project so please watch till the end of this video to gas all of the basics of material UI so that you will have a basic foundation for rest of the videos if you understood the basics thoroughly then it would be easy to follow us stuff the videos without further ado let's get started first of all let's look how to customize components in material UI for that there are mainly two approaches you can use class name attribute or you can use classes attribute also first of all let's look how to customize components with class name attribute now here we have the above with all required components now let's start customizing them as per our equipment first of all I want to change the background color of this abba for that back to this header component here I'm gonna define few styles with Jace's use styles is equal to we can call this function makes charge here inside that we can pass this object since we are going to customize the outermost element here AB bar I will name this rule as fruit and we just need to change the background color here so background color is equal to triple f4 white now let's call the function here classes is equal to use stars and we can apply that here with class name like we have done for this normal HTML div here plus me is equal to plus s dot root for this day we are trying to add new styles for this deal but in case of this materially y-component a bar we are going to customize or override existing background color for that also we are doing the exact thing we are going to set the class name attribute with this rule here now it works as expected now let's look how this works let's inspect this first of all let me tell you that all of the material components are converted into corresponding HTML elements for example this AB bar is converted into this header element here before that let me show you the documentation on how to customize components here so go to customizations under that you will see components here so you could see the detailed explanation on our writing components or customizing components now back to the application here as I told you this AB bar is converted into corresponding HTML element which is header and which has few classes which is applied by material UI you could see some pattern for these classes here which is mentioned here all of the classes that applied by material you I will have this prefix mu I and then the component name it will be AB bar in this case and then followed by this - there will be a style rule name and then there will be a random ID number you could see the same here mu I then component name AB bar and then here we have the rule name this is not similar to the root that we have named here you could name whatever you wish but this is not the rule that we are talking about here it is roll name it will be mentioned inside the component documentation here so amber let's go to its API documentation here and here you could see this roll named root so this is what we are talking about here Mui AB bar root so if the L man has this pattern of mu idn component name and then this role root and you can say that this is the outermost element corresponding to this AB bar here for this AB bother is only one corresponding element which is had here for some elements there will be more than one HTML elements we could discuss that later and this div is from the toolbar and here we have the grid container div and these three divs are for the grid core and here is the grid column which takes the extra space and thereby we can arrange first and third grade column left and right now let's look corresponding HTML elements for this icon button in this application here so here we have the HTML button you could say both of these elements are from this icon button because it has this pattern Mui icon button root and level for a single material UI element there will be more than one HTML elements I am explaining all of these things because it will be helpful to customize these elements as per our requirement we will discuss that in a bit now here we have the HTML element corresponding to this app bar here and inside these classes here you could see one single class without Mui which is the class that is applied from this jss custom rule here and its style is here background color without this class this rule will be applied and thereby it will have the background color of blue do you know why this background color of white is applied rather than this blue color for that you can click on this style here and then you could see the order of rendering or injection here all of the em UI elements styles are injected at the top forced here and the custom CSS rules will be injected and last last injected style sections will get higher priority and thereby we have this background color white our blue color from material ey now you see each of materially y-components has one section for their styles now let's customize this search bar we have added that with this input base control here so first of all let me add the placeholder before this text here I want to show a length icon for that we can make use of this property start adornment and we can pass the icon here you want to show this same control here so I will search for search icon copy this icon impo statement and I will paste that here and then we can pass that here inside this attribute search icon font size is equal to small actually I want to apply this attribute for these icons here also now I want to add some custom CSS rules for this switch input text box here that I will add new rule here search input first of all I will set the opacity to 0.6 and then we have to apply the padding:0 pixel then a pixel then font size now let's apply this class for this input base here class name glasses dot search input there is some misalignments vertically for these controls here we have to align them vertically in center inside this get container we can add this attribute align items as sender now I want to do something different with J's syntax I want to style this component when we hover on this element here for that we can do this so here we have already added these tasks with this now in order to add a horror style we can do this we will have this pair of course and then we will have this and simple and then we can do the same like we used to do with plain CSS this simple send the element which has this class applied and symbol represent this control input base here since we apply the class to this element here so when we hover on that control we want to change the background color with this custom color now if you hover on this input control you could see the newly added background color if you are confused on this new jss syntax you could check the documentation here I have given this link in video description you could check that also use and simple to reference selector of parent drew inside this example consider this parent rule here inside this you could see this rule with aunt simple so this aunt simple refers to this parent rule here so when we hover on the element with this rule this background will be applied so this stars here will be compiled into this paint CSS here here we have the parent rule with the padding that we have applied here first of the rules are defined with aunt simple all of them are converted into these corresponding plain CSS here so the and simple here is replaced with the parent rule class name when we hover this element will apply this background when this element also has this clear class applied this style will be applied you could describe this rule like this the parent element contains a child element with this class button then this background will be applied and you could also apply with multiple selectors also this style will be applied whenever the element has any of these classes selected or active we will be using these types of GSS index in our application other than this and simple you could also see and simple in jaysis you might have already seen this in material UI documentation already which refers to a local rule within the same style sheet for example you could see this container rule here along with that we have another rule button in order to refer this role inside this container rule here you could use this doll is simple that is what we have done here this pairing will be applied when this container element contains a children with this rule button here so this rule is compiled into this one here and the first rule here is compiled into this one here so whenever this class becomes a child of this container class here this padding will be applied hope you understood if you are not you could check this documentation I have given the link in video description now I want to add some margin for this icon here for that first of all I will check the Mui class applied to this control here so I will just copy this and then back to the stars here will define a new rule inside this parent element it will have an element with this class so margin rite-aid pixel let me save this back to the application so here we have added some margin before this text here so here we have the parent element inside that if there is an element with this class this margin will be applied we have been doing the same in playing charge sheet separating those two classes with his piece okay that's all about the app header here so here we have defined first method on overriding material UI component there is one more important method with the help of classes attribute it will be helpful when one single material UI component has more HTML elements for example let's inspect this here this icon button has two HTML elements so this is the first element button inside that we have this span which is also from that single material UI component icon button so we have two HTML element for one single material UI component if you want to change the background color of this inner label span here we can do that with trans name like we have done here because this class name will be applied to the outermost root element so that class name will be applied to this button let's take that here let me create a new rule BTN and let's change the background color here to something red this color is not from material you are it is from the plain HTML CSS now let's apply that class here classes dot BTN now back to the application so here we have applied the background color to the outermost element button but we have to apply that for this lapel here how do we do that actually we don't have to change the background color of any of these elements here I just want to demonstrate the use of second method using classes attribute let me rename this class name to something meaningful button level or something and let's change the button background to something green we can do this background color to green now instead of using class name we can use classes here so basically it expects an object we have to use one more pair of curly brace for the object and then go to the official documentation on icon button go to this API documentation here at the end you could see these rules applied for this element as per the description here the this rule would will be applied to the root element and hence you could see that here rule root is applied to the outermost element and here we have the rule label for the children container element which is here this span with the cloth icon button level so here we have the rule after - so in order to target these rules will be using classes attribute here name of the rule which is root 4 that will be using this class process dot BT and root like I have mentioned in JSX index you can use whatever name you wish for this style but here we have to use the X drew and then in order to focus that label we can do this labelled is equal to classes dot BTN lab let me save this back to the application that's in here we have applied the green for the outermost element and for the label we have the red background we are not going to use this style here I just want to demonstrate how you can use the second method for our writing material UI components it will be really helpful to customize material UI components with multiple HTML elements when it is rendered or you can also use these types of selectors for such components also so the label is also inside the root button so we can use these types of sectors also for now we are not going to use this style here let me get rid of this from here and from here also so far we have been discussing various material UI components and and how to overwrite their default styles now let's talk about material UI theme as you know theme has some predefined configurations for example inside this vs code editor I'm using this color theme just go to this preference then color theme I'm using this theme here as I change these themes here predefined colors and styles are applied to various elements inside this editor here same theme concept is also the inside material UI also for example we have colored these notification number here using this color secondary for the reddish color and for bluish color we have this color primary so this is already defined in material uit we have not specified anywhere any theme inside this application and thereby will be using default C if you want to know various parameters inside a material UI theme you can check that here inside the documentation under customization you could see this link 4040 so these parameters are already defined inside the default material UI theme you see here we have the color primary and when we use primary this main color will be applied to that element we can also access light and dark version of this color palette here so mainly we have reduced palettes like primary secondary and then other than that we have error warning info success etc so this color is applied as per the default theme of material UI you can access these theme configurations inside our react components for example here we have the function spacing by default it retains 8 let me show you how you can use this function inside our JSX index here into this function makes - we just need an object inside this function we can access the theme which has all of the default configuration a we are going to define a function actually so when a function just return an object we just need to enclose that with a pair of parentheses we don't have to write the return statement now we can make use of this theme parameter here so I will just remove this 8 pixel from here same dot spacing function can be called so it actually return eight pixel if you want to apply 16 pixel you can pass to here if you want to say 12 pixels here you can pass 1.5 also so this is what I meant by dynamically defining CSS or speed jss index we can't do this with a plain CSS stylesheets now let me do the same with this padding also for that I will be using this backticks and first of all here we have this zero pixel now we have to define this eight pixel with the help of theme spacing so that we can use this dollar simple and then pair of curly brace so this index is from JavaScript not from the assets or react okay so this is what we call string interpolation call this spacing function here this will be returned with eight not eight pixels so we just need to add P X here but when it comes to margin here when it comes to single value we just need to pass theme door spacing it will be converted into corresponding our unit 8 pixel now let me save this back to the application so everything works as before now let's try to customize default theme inside this application for example if you want to change color of primary here and secondary you can do that also we can do that inside this outer component app first of all I will define a theme here so constant theme is equal to I will call this function create theme inside that we just need to pass this object and we just need to change the values of these primary and secondary color so which is inside this palette object so we can do this so we have to use the same key palette is equal to another object inside that we have this primary ok for the single color we have three variations light main and for now I'm changing main and light version of primary like this I want to change the secondary color also okay so here we have changed main and light color so here we have overridden these properties rest of the configurations will have the same value as per this documentation here now in order to apply this theme into this application we just need to enclose all of the elements inside this app component reads theme provider theme provider here we have to assign that inside this attribute theme is equal to theme that we have created above now let's enclose all of the elements inside this app with this theme provide out back to the application here you can't really see the change in color because the our color that I have applied here is almost similar to the default color so in order to notice that change I'm just going to update this main color primary main to something easily identifier so use this hexadecimal color which is corresponding to red color so let's check that here that's it so here we have replaced the blue color with red in primary color I'll be using the previous value I will stick with this new colors for primary and secondary color and we save this back to the application here now let's try to change the background color of this application with theme overriding so the background color is also inside the palette so we can do this background an object inside that we have to change this default value I will use this custom color here let me save this back to the application so here we have applied the custom background color you can check that here and here we have the background color new custom color that we have applied by default it have been using this default color here so far we have done with this app header here now finally in this tutorial let's look how we can design a page header just below the app header you can reuse this page header in every pages of this application and now let's design the page header with what we have learned so far basically it contains three parts page title page description and finally and I can't describe the page purpose for that first of all I will create a component inside this components for the here page header inside that let's create a function component with this snippet our FC I want to enclose all of the elements inside this component with paper component from material UI as per VM UI documentation here the paper component is similar to an a4 page it act as a container for children's inside the component so here we have the paper component with elevation and without elevation so in our application we don't need this elevation so I will set the elevation as zero so let me apply that here and in order to avoid this round corner here we can save this attribute square inside this paper component here first of all I will have this view and inside that I will this mu I component card with card component here we have various examples on using the card component we can have the title image description photo etc so keep in mind that if you want to display that as like this card examples here this card component will be helpful inside this page header component here we just need to show the icon with the card component so the icon that we want to show inside this card component will be passed from the page so we can access that from this props here so we have to use this destructive syntax here so we can access icon here from props along with icon we will have these informations page title and page description so it should be passed like title and subtitle now inside this card component here we can render the icon let's display this page header just below the app header inside the app component here but that we just need to add this page header component here into this component we have to pass those informations title/subtitle and finally the icon for now we just pass this sample text here page header then page description and then we have to pass an icon here here I will be using this icon here so let me copy the import statement and I will paste that here pass this icon into the page header here so this is how we are going to show the page header in every pages inside this app with title subtitle and icon so here we have shown the icon you could see the page head up with this icon that we have passed from app component now let's show page title and page description for that I will be adding another div here inside that first before you want to show this typography component from material UI mainly this typography component is used to display headers like h1 h2 up to 8 6 sub titles etc so in this component we want to show this page title with an it's six header so we can do this first of all we will have this attribute variant at 6 and we can also set this attribute component deep so this h6 component will be wrapped inside a div it will be helpful to enclose this s6 with a d4 styling the component and then inside this typography component we can show this text so that we can access from this title here like this we want to show this page description also so let me copy this and paste in here instead of h6 we will use this variation subtitle to decide that we want to show this page description with this variable subtitle so these are the elements inside the page header and currently our app looks like this now let's customize this application into this design here first of all I will define a constant use styles we'll call this function make starts here we can use this function with same parameter and inside that we just need to return an object like this first of all we want to apply some stars to the outermost lemon which is this paper here so I will name this style as crude and then inside that I will set the background color so I'll be using this custom color here now let's call this function you Styles here classes is equal to you stars function can be called and we can assign the class here class name classes dot root now I want to start this div here so for that I will create a new style page header padding is equal to say m dot spacing of the range force and I will set the display as flex margin both theme dot spacing asti range - now let's apply that here now let's customize this icon here I will add another style page icon first of all we'll set the display as inline block then we want to set the padding see him dot spacing or C range - and then finally I want to set the color of the icon here for that I will be using this custom color here and now let's apply this class into this icon card here class name is equal to closest dot page icon now let's customize this page header and page description page title padding-left theme dot spacing or c range for now let's apply this class for this div here so let me copy this listing here page title now finally I want to change the opacity of this page description here for that first of all I will inspect this element here saying this specific Mui class that is applied to this element here I will copy this class and then back to the application and we want to set the opacity for that we can do this inside this pattern element so we can use this simple and simple here inside this pattern element we will have an element with this class and we want to set the opacity for the element so opacity I will set the opacity to 0.6 now let me save this that's it so here we have created the page header as per the plan now let's do some final touch up inside this application first of all I want to change this icon size here that we can change while passing the icon inside this app component here I will set the font size to large here font size is equal to large now there is one more thing to do with our app bar that we have added in previous tutorial now inside this material UI documentation itself they have used AB bar from material UI for this component you could see this default shadow here the same shadow is applied to the AB bar in this application also Co CV box shadow here in order to see that we have to change the transform CSS transform value both of these AB bar and the page header are on same level we have to stack this AB header on top of this page header then only you could see this box shadow by default material you I have been stacking the AB header above all other elements but the version that I have installed on my system does not include that style we have added the AB bar inside this header component here and we have the custom CSS for the AB bar inside this rule root so I will do this transform translate is it with the value 0 back to the application now it works as expected now I want to add few more points on customizing material you might see so far inside this application we have changed some of the default values inside the team palette here for example inside this card here if you check this card radius you can see that all of the material UI element with a round radius will have a fixed value for the radius by default it will be 4px if you want to change this value you can update the shape inside this default theme here so we just need to do this you can add this shape property inside that we can set this border radius and I will set that to something on 12 pixel back to the application now if you want to overwrite a material UI component globally inside the application you could do that also for that you could use this a property overrides for example or of the app bar inside this component should have this style here in order to do that so first of all here we have to provide the name of component for AB bar it will be Mui bar you could check this component name inside the documentation also just search for AB bar here and go to the corresponding API documentation under component name section you could see the same component name Mui Abba inside this overrides here we are going to override rules applied to this mu I component inside this API section itself you could see this CSS rules applied to the element so we want to change the root style of the component so I could do this root another object let me cut this and pacing here back to the application that's it we have shown this shadow because of this style that we have applied here the same style is removed from here so it is definitely coming from this part here so with theme customization you could make big difference inside the application globally now let me show you one more cool approach to customize Mui see for that you could use this property here props so with overrides property you could change the rules of the component with props property you could change the properties that is listed inside the API documentation here for example if you want to change the default behavior of this icon button here if you click on this icon button here you could see the ripples so first of all you have to check the corresponding icon component name so icon button go to the API documentation here we have to use this component name mui icon by Mui icon button inside that we just need to override this property disable ripple so this sample ripple is equal to true so here we have disabled represent side the icon button globally inside this application so with theme customization you could do major difference inside the app appearance now inside this application for theme customization here we just pass an object like this nowadays most of the application will have multiple dream for a single application so the user have the privilege to select based on his interest in that case you could save these same object in an array based on the selection you could program it change the theme also so with this video we have covered all about material UI basics in next video we are going to design a form with validation containing almost all commonly used material UI input controls I will post the video a link in video description and inside the first comment of the video once it is uploaded if you found this video helpful please thumbs up this video and for more hours and videos like this please please subscribe to this channel code affection please share this video with your friends and colleagues so that they can also benefit from this video have a nice day bye

Channel: CodAffection

Views: 21,778

Keywords: how to customize material ui, component customization in material ui, theme customization in material ui, override material ui component style, JSS styling in material ui, CodAffection, Complete Material UI Tutorial, with sample project

Id: W-QasNYJ-3Y

Length: 36min 42sec (2202 seconds)

Published: Thu Jul 02 2020