Theming with Material UI | React tutorial

hello and welcome back to the channel today we're going to be looking at theming with material UI this will include some of the basic things that you can do and also some of the more complex things that may not be as straightforward for you from the get-go if you're here to just grab some code then there's a link down in the description below to the GitHub repository uh so go ahead and click that if you just want to grab the code this is your only way there then click the like button on your way down anyway and we'll get started with the video in the meantime so just a quick little intro to what material UI is if you don't know it's a component library for react you can install it in your app by running some simple commands like the npm install and it's also pretty straightforward to set up on your app all you need in your app to get started with material UI is to install it and then add in theme provider and a CSS Baseline wrapper around your app and then you can start importing these components right into your application and get some pretty cool pre-built components out of the box so for example here what we're going to be working with today are a few different typographer free components and some buttons and also some Fabs so as you can see here what's being rendered from the code on the left is we have some typographies which are rendering hello multiple times and then we have four different buttons and I'll just talk about like why they look different and what's going on here and also these Fabs here but in regards to theming with the theory UI there's a few common ways of doing it and those are definitely going to be the ones that you're going to be using most often this video is going to be focusing more on the theme.tsx file and how you can customize this because I don't feel like the resources out there is very clear on how to use this properly and how to set the global Styles in your application so that's what we're going to be focusing on today however I do just want to touch on these other ways of doing it which includes the styled components the first one we're going to look at now is a styled button so as you can see here I'm importing styled from the movie system and I've wrapped the button from it and this button is being imported from material so the material UI button component is being wrapped in this style and Then followed by a function which is returning a style for that button so in here you would just use the jsx Syntax for declaring CSS for example here I've got a background color I could also add a height for example or any type of TSS property I can think of using jsx syntax so CSS would be like this and with color like that but when we're using the jsx syntax it's like this instead so I could set a height of let's say 20 for example there you can see that buttons changed to 20 and that's because now I'm rendering this button using style button I'm no longer using just a regular Button as I'm doing with these ones I'm just going to undo that that's what the styled components do and honestly I really like this approach I would personally use this quite a bit in my own applications so I might have a separate folder for common components I'll use for our application and I will Design them in such a way and then just use those components from application which will basically have a base using the material UI getting me started pretty quickly but then I can also modify them and um have different versions of them also if I want to across different sections on my website or application so looking at some of the basic properties that you have on these components I would say the most common one is a variant so most components usually come with a variant and the way you know what variants they have is I would suggest you make their website your best friend so when you go into the material UI website you can look at the things you want so for example if I look at button it'll show me here that look there are basic buttons these are the three different types of buttons there are variant text contained and outlined so you can see text only it's a background when I hover over it that's contained an outline I choose the one I want and I will pass that into my property here also I can set the color to primary which will be the primary color I've set in my theme file and um color secondary that is also something I can set in the theme file as well so the other way to theme your properties is using the SX property this is essentially the same as doing Style on a component in react but SX is just shorthand for it and it's basically just allowing you to do inline CSS on your components so you might have already declared a style component which Maybe there's only one specific case where you've changed a single property on it and it's maybe not worth it to create a whole new other component that's copying that component just to have a single property on it so then you can just extend it and do something like this on there just to also mention some of the other stuff that we have in this page right now we have a container which basically just puts our components inside a center div on the page and stack allows us to basically just as the name suggests stack out components and then we can passing a spacing property which will add in some padding in between the components it's quite nice to use when you just want to add things in and just stack them on top of each other with little effort you can also change the direction as I've done here with these ones where I've got another stack which has a direction of row I think this type of styling is pretty straightforward and self-explanatory you can style these you can add in whatever Properties or css properties you want create these style components reuse these style components throughout your application add inline sales success there used to be a way for you to pass in class names to these components as well I think yeah you still can but the material UI documentation doesn't even talk about that anymore so I assume that they've just went in a different direction about it all together as like this isn't even being encouraged to be used anymore so I won't even go into it any further you can also have classic CSS files and have your CSS names in there as well which I don't really like to do with react as I usually much prefer to go for the style components approach myself however today we're going to be looking at the theme.tsx file and looking at how we can change our Styles globally in our application and how we can Target specific components overwrite specific things and just set things that will make our lives a little bit easier and modify the default material UI theme to our liking so that maybe we don't have to do as much custom theming throughout the rest of the application as we're building it the first thing I'm going to talk about is just like the setup of this file it's you import create theme from Material UI and you create a theme with an object and you export it and then this can just be ported into your index.tsx file which is passed into your theme provider and then that's your theme for your application the most basic thing you can do in here is set up your palette and I would suggest that everybody do set up their palette to set the main color theme for your application so probably the most important one would be your primary color as everything defaults to your primary color for example in here if I don't have this color set to primary on this contained primary button you can see it still takes a primary color so if I don't want to pass that in on every single button my primary color would be the color for me to change but this set the primary color what we want to do is add in the palette option and then underneath primary we want to set the main color to a specific color and I'm just going to import Blue from Material UI and I can set this to different shades of blue by using this brackets here but I'll just go for 500 as the is the median and you can see here that that color has been changed to like a slightly lighter blue or let's go for something a bit more um darker you can see that's gone into a Dark Root I think I like the 500 so I'll stick 500 for now and then we can also change the secondary color and that the way I'll do that is by setting secondary and mean for secondary as well so main is basically referring to what is chosen when you just type in secondary into the color field here and so I'll just set this to a red let's do red 500 now import that red from Material UI again and then you can see my my button has changed to a red button so that's kind of like the main bit that you need to understand about setting your primary and secondary color in your file the other important ones will be things such as success um or error or warning or info and these are the different types of components that you get in material UI or specific statuses so for example if we take a look at alerts you can show these little banners in your application with material UI and when you select the severity you can say error warning info success and these will be like the default colors for those but you can also apply these colors directly to your buttons and different components as well so instead of secondary I could say error so this could be an error colored button and that's a different kind of red so if I change this to success for example this could be a success button and I could change the color of the success button in here as well so if I did success Main let's do green let's do purple then as you can see my success button has turned into a purple um the other things to know is when you're working with light and dark mode at the moment I'm haven't got that set up but you can also change what the light in dark mode for your colors will be so if for example on light mode I wanted my blue to be slightly darker I could change it to this and then on my dark mode I could change it to something slightly lighter for example by setting the dark version of my primary color to something else I'm not going to delve too much into light and dark mode because I think that could be a separate video on its own to show how to use light mode in dark mode and set it up properly on your application so if you'd be interested in that then then please leave a comment and let me know you want to see something like that and I can look into making a video for it moving on one very quick but amazing thing about material UI which I use all the time I wanted to just point out to you guys is the responsive font sizes so that's the reason I've put these hellos here is to show you guys what you can do by just doing responsive font sizes into your application and pulled off a material UI and what you basically get is when you use these typography components for your attacks which you should be using throughout your entire application if you need to change the size of these variants um I'm going to be showing you how you can do that in a second um but what you get with the responsive font sizes is that when you go into a smaller view size you can see the size of the text changes um and show you again the size changes so that it fits the view it better and makes it easier for the users to read if they're on a smaller device for example so you that's basically just like a free way to manage your font sizes in material UI so there's no reason you shouldn't have this by default in your theme file Okay cool so now let's go ahead and take a look at this button and see how I can customize this button so I've got this button here this is my my my primary button and um I want to change all of my buttons across my application to not be this Square type button I want it all to have more of a boiler radius so how will I do this in the theme file I want to extend the components property and inside here I will be selecting the mui button and underneath this I would select Style overrides and then within style overrides if you hit control spacebar you can see all the different things that you can um overwrite if I wanted to just overwrite everything I would select the root and the root will be the root style for this material UI button and then I could say unroot that I want all border radius on all buttons to be plenty for example now you can see all of my buttons across my whole entire website no matter what variant they are they've all changed their border radius to 20. so let's say for example I didn't want to apply this to all the different buttons I specifically only wanted to do it to the outline buttons the way I would do this is instead of selecting root as the style override I would select that specific selector so as I said before you can hit Ctrl spacebar to see all the different things that you can override and in here we know that we use the outline button and it's an outlined primary button so what I'm going to look for in here is the outlined primary button and if I save that then that will only affect this button selector across the website cool so in case for whatever reason your intelligence isn't working or you don't use Visual Studio code and you don't have that luxury there is a way to see all the different styles that's applied to this button so if you go onto the material website and you select the component that you're editing and just go all the way down you'll see this API section and you can click on the specific component that you're using the button and on here you get some useful information about all the properties that it takes so this is useful to know that the different types of things that you can do so for example the disable Ripple is something I had on my code on this button as you can see when you click a button it does this little ripple effect I have the disable ripple effect on this contained outline button here and when I click it you can see nothing happens it doesn't do the ripple effect in case you wanted to remove that um and yeah so if you want to refer back to the API for this and see all the possible parameters you can pass into the components you can look here but what we want to talk about is the styling and if you scroll down you can see the CSS and it will tell you these are all the different CSS properties that you can override and that material UI will use to style your components so there is another way you could also overwrite these which I wouldn't recommend is uh having these Global classes inside your um project so you define a CSS class with this name to overwrite that TSS that's coming from zero UI but I'd much rather prefer to go through the theme.jsx file to do this instead as we have all the tools we need to do that there so you can see here the outline primary is one of the options that I use you have a list of every single thing that you can do here now let's go ahead and take a look at the Fabs I'm just going to close these as we don't really need them anymore here I've got three Fabs they've got an icon in the middle um they've all got the color primary and they've got the size large medium and small and as you can see that's the properties that size takes large medium and small so let's say I wanted to change the size of the large one and I go over to do the same thing here so I select movie Fab and I try to overwrite it so I'm going to do style overrides and then I'm going to look for something that sounds like I suppose text large or size large so I search for size and wait hold on a second there isn't a size large there's only a size medium and a size small so I'll go ahead and go into the component API for the Fabs and I'll just have a look at the list here of CSS rules okay so I can see they've got a size small and a size medium but they don't have a size large however they do let me have a size large so here the size large is actually the default so if you don't provide a size it will just default to size large however it's not providing me the option to overwrite this because they're not exposing any specific classes for the lodge the large properties just fall under the root component so what I need to do is Target the root component um but not apply it to all Roots because if I just did root and then change the let's say I wanted to change the width and height of this let's say I want this 60 that would change everything so what I need to do is specifically say when the size is large I want it to be this width and high so the way I would do that is I would change root into a function so the function will take in a property called owner state and then I will spread honestly in this return function and I'll do own a state DOT size equals large so only when owner state or size is large and the only state is the state of the component that's in your application and when that's the case I want to return with 60 and height 16. and as you can see now this has changed only the height and size of this just to make it even more obvious I'll make this a hundred so now my large button is actually truly large and I've set that by of writing the state for uh when size is large um so you can do this for any of the other ones as well so if for example outline primary had a specific state or specific property that you wanted to change on you could um hand pick and select those even if there aren't CSS classes exposed for them as I said before the size was defaulted to large so let's say I didn't want to just pass in the size every time throughout the whole entire application but I didn't want to default to Lodge I wanted it to default to medium uh for example instead but I didn't want to get rid of large I still wanted large to be there as an option what I could also do here is instead of style overrides I can pass in default props so the default prop will allow me to override any default props that is set on the component so if I set this to medium then if I don't pass in a size property to the component then it will default it to medium and as you can see now that has changed the button to the medium size to match when size is actually equal to medium as well so so we also looked at variants and the different types of variants that we can have so let's have a look at this for example and see what variance we have on this Fab if I just hover over this you can see that I've got a circular and an extended so if I change this to Extended because extent circular is already the default you can see this changes the shape of it a little bit I can add other things in here and then it will turn into some text like that uh whereas if I added text in here I don't think it's as nice as you can see here so if I have this variant where it's extended then I get a nicer kind of alignment inside the Fab so what if I wanted to add my own variant so this is also something that we can do within this file and we can make this available to us across our entire application and the way we do this is declaring the variance property still inside this movie Fab and this is an array and you can Define as many different variants as you want and within the array you have an object which will say props and the props will take in a variant so it will be variant and then you can give the name of their variant so I'm just going to make a variant for the Fab to be square and then after this I can pass in the style and the style will be border radius and I guess or something cool so actually this would work if it was just vanilla JavaScript but since we're using typescript here I also need to extend the material UI types to support this so the way we can do this is by creating a new file and we'll just call this file Nui Dash extended under dot d dot yes and inside here we'll import the material UI module as we want to extend this not overwrite it and then we will declare the new module and inside here extend the interface for Fab props variant overrides this will vary on the component that you're overriding and then in here I will just add in square through and this will add in the Square property as part of the theme for variant overrides and as you can see now this is not erroring anymore and it allows me to Define this props as a square and that means also now when I go into the code I can also find on here square is now an option that I can select as a variant and if I save that you can see I now have a square Fab instead and I can obviously extend this to do whatever I wanted to do and that is pretty much all I wanted to cover today I didn't want to use this video to go into details about all the different types of styling that you can do like um different CSS values that you can apply to things because those things you can look up those things you can try out for yourself and style your components however you need to I think these are the techniques that I thought would be important things that are not quite intuitive to understand but also gives you great flexibility over managing your styling across your entire application this allows you to have very good control of the default material UI theme that you get personally I'm still a fan of using styled components and building out style components to use across my application and I wouldn't use this theme file go into this much granularity to just define specific components but it's good to know and understand how it works so that if there is anything that you want to add you give yourself that extra flexibility around your application you can do it there are multiple ways of digging into it and at first material UI can seem as if it's a bit locked away there are certain things that when you try to override in your start components it just doesn't really work the way you think it would or you try to add an inline style and it doesn't really take effect and stuff like that um but if you overwrite it from the root of their actual Styles in material UI then it should always override and you'd be able to get the desired effect that you're after so one thing I didn't touch on in this video is break points um which I think is very important when it comes to developing especially for mobile friendly applications however I think that's a separate topic if you'd like to see a video on breakpoints and how you can use material UI to create responsive applications then please let me know I'd be happy to take a look at making a video for that and just leave me some feedback and tell me how I'm doing um if you're enjoying these videos if there's anything I could do better I'd really appreciate your feedback that's all for today hope you enjoyed it and learned something new subscribe for more content peace out

Channel: ridhwanio

Views: 3,702

Keywords: Tutorial, react, coding, materialui, mui, programming, styling, theme, developer, javascript, typescript, ts, js, learning, guide

Id: k8m_nLBH4UY

Length: 25min 42sec (1542 seconds)

Published: Wed Feb 22 2023