Material UI Theme Override and Props in React JS [Global Styles]

[Music] welcome everybody today we're going  to talk about how you can use Material UI themes css overrides and props to customize  material ui components by using this approach we'll be sure to keep our code concise  our code will be portable across projects and we'll be able to maintain the contract of  our material ui components so let's get into it we'll start by adding a material ui core  dependency to a react code sandbox project then we'll create a theme we'll import create muy  theme fro

m material ui core we'll also go ahead and import some  colors that we'll use within our theme next we'll create a theme by calling create theme and we'll set some of the colors in  our palette starting with primary making that deep purple then we'll add  secondary making our main and amber color and our contrast text color a deeper hue of  the deep purple then we'll export our theme now in app.js we'll import theme provider from material ui we'll make it our root most component inside app then

we'll pass it our theme next we'll import button from material ui and we'll create a button with variant  contained and the color will be primary and we see that our color is the deep purple  that we set as our primary on the palette likewise for the second button we'll  pass it secondary and it's amber next we'll make a file for  our brand button component here we're copying over the  button that we created in app.js we'll import our brand button component in app.js and we'll replace one of the

material  ui buttons with our new brand button and we'll duplicate it here so that we  can show the primary and the secondary variation we'll add a color prop so  that we can pass through our own colors and we'll add the color prop  to our brand buttons in app.js next we'll customize our labels and we'll use the children prop unbrand button we'll continue to customize our  button by removing the drop shadow we'll do this by adding the  disable elevation prop to button next we'll import with sty

les so that we  can create our own classes for the buttons we'll create a styles function that  returns an empty object for now and we'll call with styles  before we export our component next we'll add a default class to remove the rounded corners and  disable the text transformation next we'll add classes to our props list this  is made available to us through the with styles and we'll add a class name and  we'll pass it classes.default we'll refresh the codepin browser and we can see  that our

class has been applied to our buttons next we'll add a class to customize the hover  state of our primary button we'll target the hover state with an ampersand colon hover and  then we'll set the background color to amber and the text color to deep purple next we'll add our primary class to  our button using the clsx library this library will concatenate our classes and that works but now our hover state  will be the same for our secondary button so instead of using class name and concatenating

  our classes we'll use the classes prop and we'll target root and  pass it our default class and we'll target contained primary  and pass it our primary class now our hover state will only  apply to the primary button if we refer to the material ui api we can see  the classes prop that we just used and we can see what rules we can target within the classes  prop here's contain primary it applies where the variant is contained and the color is primary now  we'll add our last customization to our

buttons for our secondary button we want the font to  be bold so we'll give it a font weight of 700. we'll pass that class into our classes prop  and we'll pass it to contained secondary this solution works but there's a more  concise way that we can achieve the same thing and make our code more portable between projects we'll open our theme and we'll  start by defining our theme's props we'll add theme.props it will be an object  we'll add movie button as the first key it will be an object wit

h the key  disable elevation that we set to true now we can remove disable elevation  from our brand button button because now all material ui buttons will  have disable elevation be true by default again we know we can do this  because within the material ui api we can look at the button component and see  that the disable elevation prop is initially set to false we can also see that we can override it  at the theme level by using muy button as a key and that's exactly what we've  done we've us

ed muy button and we've said the disable elevation  prop on muy button should be true next we'll move our css styling to the  theme as well we'll set the theme overrides again we'll target movie  button we can see in the api that root is how we apply  styles to the root element so we'll copy over our default styles  remove it from our brand button you can see on the right that our styles disappear  but then when we add them back to the theme our styles are back in place we'll repeat the process

of copying over  styles for primary as well as secondary back in our brand button now our styles  are empty so we can remove with styles we can delete classes remove it from our props  list delete the styles object remove colors and remove with styles from our imports list what  we're left with is just the material ui button back in app.js we can replace brand  button with just button adding the variant attribute back to the button component and that's it we can remove our import of  brand butto

n and we can delete the brand button component entirely that's a significant amount of  code we've been able to remove from this project additionally now when we want  these styles and other projects all we have to do is copy over this theme file let's do the same for a text field component we'll import a text field  component and give it a label prop i'm also going to go ahead and use  some grids here for material ui in order to lay out our components a little nicer next we'll go to the text fi

eld api the text field is actually one  component that's made up of several sub components as you can read here first  we're interested in modifying our input label we'll target it by using the key mui input label we'll add it to theme.props you can see that one of the  props on my input label is shrink so we'll use shrink and we'll set it to true and that makes the label  stick up into the left corner you can see here when i commented  out what the difference is next we'll use theme overrides t

o add a border  around our input we'll target mui input and root will position our label  using top we'll add a border here i'm auto importing  gray from material ui colors and setting it to 500. next i'll  set the padding inside of the input and now we have a gray border around our input one  problem is we have this underline at the bottom we can disable that by targeting again muy  input and disable underline setting that to true excellent next we'll customize our input label we'll use text tr

ansform to make it uppercase and we'll make the font a little larger finally we'll change the border color on focus we'll target the active rule focus using a  ampersand and dollar sign and we'll add a border and we'll make the color our primary  we'll go ahead and add an outline as well i'm one curly brace off here so i'm  going to shift all my code up one there we go all right that looks better so that my input  won't shift on focus i'm going to add an outline that's one pixel but transparent

this way on  focus it appears that there's a two pixel border where there was a 1 pixel border  in gray when it wasn't focused let's end with one more example using  tool tip we'll add one more grid item and inside the grid item we'll add a tooltip we'll give it a title prop and we'll just pass in lorem ipsum  this is what we'll show when we hover then we'll add some text and with tooltip it actually needs a container  around the text and so we'll add topography now when i hover here i see the l

orem ipsum  tooltip with the default material ui styles we'll customize our tool tip by adding an arrow  to it we can do this by adding a theme prop for muy tooltip and we'll set arrow to true now  you can see there's an arrow on the tooltip next we'll customize the css we'll  target muy tooltip and our css overrides we'll make the background color white we'll add a purple border and  we'll make the text purple as well we also want our arrow to be purple so  we'll add arrow and we'll make the co

lor our theme.palette.primary.main we use color here  as the rule because the arrow is an svg element i'm going to zoom in here so  that you can see a little bit better the tooltip styles that we've applied we hope you found this walkthrough helpful  if you enjoyed the video please hit the like button and subscribe to our channel so you can  keep learning and grow with us for more free resources and to level up your skills head  on over to headway dot io see you next time [Music] you