The ULTIMATE guide to styling/customizing Material UI (MUI)

hey how's your work going oh hey yeah I'm making some good progress here I'm just gonna finish this line here and here almost done many people seem to think that customizing material UI components is hard but let me tell you it's not well yeah maybe there are a few cases which are a bit tricky especially if you're a beginner but once you get the hang of bit it's actually not that bad and I'm not just talking about you know easy things like changing the color of a button or something like that I'm talking about full-on customization that means changing how the components look and feel to a really granular level and if you're struggling with this let me reassure you you're not alone I was in the same boat when I started out and when you go on stack Overflow you'll find tons of questions from beginners about this topic so in this video I'm gonna explain to you everything that you need to know about customizing material UI and by the end of it you'll know all the different techniques and when to use them so make sure to watch till the end because you're gonna walk out as a pro as an expert customizing your components and I'm sure you're gonna have more fun doing so alright enough of me talking let's get to it first let's start with the easiest way and this one might be so obvious that many people Overlook it I'm talking about the API for each component you can change how components look and feel with predefined props let's take the bottom component for example if you've ever used material UI for a bit you'll know that you can set the variant to change the button's appearance maybe you also know that you can change its size too but if you want to remove the ripple effect when pressing the button how would you do it using some complex CSS overrides not needed you can simply disable it by setting disable Ripple OK what about the shadow if you want to remove it would you override the Box Shadow CSS well I guess you could do that or you simply set disable elevation or let's take the paper component for example you can easily change the Shadow by setting and changing the elevation prop instead of overwriting box Shadow with CSS okay maybe you knew that already but did you also know that you can change the variation to outlined or Stat Square to true for Sharp edges again no need for custom CSS styling so as you can see for some common changes it's really that easy so the takeaway here is before you dive deep into CSS just take a quick look at the component props first chances are you might find what you're looking for in there okay let's say we want to customize this button a little bit more for that we have a couple of options we could use the SX prop which is available on every material UI component it's kind of like the normal style prop on HTML elements but under the hood it gets converted into CSS classes and comes with some additional features first let's change the bottom color like this you can put any valid value in here but if you want to use material colors mui has built-in colors that you can import and use like this now let's get rid of the upper case change the font size and change the Border radius if we check the result it looks great until you hover over it let's fix that as well and this is something that you can't do in a normal style prop here you can add hover styling and any other states like this let's check the result cool this looks good now you might be not the biggest fan of styling components like this if you feel like the Styles or making your files hard to read you can separate The Styling by using the styled function you can pass it on HTML element or material UI component like in this example button and then style it like this this will create a style component and alternatively if you want to use the normal CSS markup you can use the CSS function from emotion instead although you might need to add some extra rules to remove linting errors it's not that ideal actually so in this case I would rather recommend to use normal CSS files you can style components like that easily as well but if you want to co-locate your CSS and have it scoped for each page or component you also have the option to use CSS modules and the last option is to use a theme which is one of material ui's strengths since all of its components can access it you just have to wrap your application with a theme provider and create a theme object here you can Define all kinds of styling rules that will override the defaults in our example let's change the default styling for the paper and button components let's start with paper first we need to go into the component which is called mui paper then style overwrite and then root this is how we can override the default styling for all paper components now we can change the padding and Border radius and that's going to be the default everywhere now let's continue with the button component before we do the same thing here let's add some default props in our example we don't want the ripple effect and Shadow instead of giving the button these two props each time we use it we can just add it here once in the theme and it's going to be applied everywhere alright now let's get to the style overwrite these are the same changes from the previous steps and now as you can see our paper and button components are customized and look like this by default however setting the color of the button like this might not be ideal when creating a website you usually have a design system that includes some colors that you consistently use throughout the website if we set the color of each single component like this and later decide to use a different color for all components you would have to change it in every single place that's not ideal but material UI has a built-in solution for this here I'll show you let's remove our color overrides and take a look at the button again actually let's also change the variant to contained so we can see the color better as you can see it's Blue by default and the text is white even though we didn't Define any colors that's because it's using a default color palette we can access it in all components with a color prop if we set it to primary it doesn't change because that's the default already but if we set it to secondary it turns purple which is the default secondary color let's go into our theme and change these we can do that by defining running a palette object which contains the primary color palette here we can simply set a material color like this it will automatically choose the main color a light and a dark variant and the text contrast color see it's original let's add a secondary color to Yellow if we change the button color to secondary it uses yellow now as you can see the text is black which is set automatically to have the best contrast if you want more fine grain control you can go in here and put in an object in which you define the exact main color and a dark variant for hover see it's now using the exact colors if you want you can also change the contrast color for the text as well and the great thing is all components will use this color palette by default and you can adjust it whenever you want in one single place and here's one more tip if you want to use the palette colors outside the color props of your components like let's say inside the SX prop 2 for example Define a border how do you access it you can write primary or secondary and then the property you want to use like main for example and that's all see it works you could also access dark or contrast text as well it's really easy and convenient and if two color palettes are not enough you can extend them to as many as you need there's a lot more that you can do with themes and this deserves a whole video on its own let me know down in the comments if you'd like me to cover this as well and while you're at it give the video a like if you find this helpful that helps me out a lot and also subscribe if you don't want to miss out on more material UI content alright back to the video now that you know all the different methods to style and customize components you might be confused which one to use now to be honest there is no correct way but here is my recommendation if you already have a design for your website start with a theme and add some style overrides or default props that you want all instances of these components to have like we did with the paper and button example then you can use these components which already by default are styled through the theme and if you have cases in which you need some additional changes you can use the SX prop or normal CSS to do that however if the customization through the theme is not enough for you or you just don't like the syntax you can instead create your own button component that is based on the material UI button and add your own style filing through the SX prop style function or normal CSS you can even add additional functionality to it if you want to make it truly custom now before I wrap up this video I want to address one common issue that often arises we looked at simple components up until now but what if you want to customize a more complex component and change different parts of it let's take a look at the slider for example components like these consist of a main component with its class like in this case mui slider and smaller parts that have their own classes that you can Target you can check the documentation for each component or use the inspector in the browser and find out what they are called here we have the thumb track and Rail and we can Target each one of them to change their styling like this and then there are also states and which components can be in like for example active Focus visible and so on they correspond to CSS pseudo classes for the most part for example if we click and hold the slider thumb you can see the mui active and mui Focus visible classes being added and when we release mui active gets removed but mui Focus visible Still Remains so in this case we could Target them like this and change the styling of the thumb in these two states see it works it's recommended to be specific and not just Target the states directly like this but instead increase the specificity by adding the component class as well that way you will avoid CSS bleeding out into other components and creating unwanted side effects alright that's pretty much it for this video I hope you enjoyed it I hope you found it helpful if you did please make sure to give it a like it helps me out a lot also subscribe if you want to see more of this kind of content I'm gonna make more videos about mui for sure I already have one where I cover the basics so make sure to give it a watch as well if you haven't yet and yeah that's all see you in the next one foreign [Music]

Channel: FrontStart

Views: 18,735

Keywords: Material UI, MUI, Learn MUI, Learn Material UI, Material UI for beginners, MUI for beginners, How to style MUI, How to style Material UI, MUI styling, Material UI styling, Customize Material UI, Customize MUI, How to customize MUI, How to customize Material UI, Material UI Theming, MUI theming, Theme in Material UI, Theme in MUI, Material UI theming, Custom theme material ui, custom theme MUI, MUI theme how to, MUI theme for beginners, How to theme MUI

Id: HsdjivqQ7BA

Length: 10min 29sec (629 seconds)

Published: Tue Aug 01 2023