React Material UI Tutorial - 46 - Customizing Theme

all right for the final video in this series let's learn how to customize the material ui theme by default mui has a theme that is used by every component we include in our application if you go to the docs and click on customization and then default theme expand all you can see the various styles that we've been using all along the breakpoints so access to excel the corresponding values the color palette so primary secondary etc shadows typography and finally z index although this is a great default you might want to customize the theme according to your application's brand the most common requirement being customizing the palette in this video let's learn how to do that to create a theme we need to import the create theme function from mui so in app.tsx at the top import create theme from at mui material next just before the app component call the function and assign it to a constant const theme is equal to create theme the function accepts an object as its argument the object structure should match the theme object structure which is similar to the default theme we have just had a look at so we can specify palette which is an object with a property secondary which once again is an object with the property main and this has to be a color value now if you go back to the docs and click on color in the side nav you can see the different colors that mui provides out of the box let's make use of a shade of orange for our example at the top import colors from material ui now secondary dot main we set it equal to colors dot orange of 500. this is just a shade of orange next in the component we created in the previous video i'm going to change the background color to secondary dot main if we now head back to the browser we see the secondary purple color from the default theme and not orange this is because our custom theme is not provided to our component to provide the theme we need to import the theme provider from material ui so import it at the top wrap the entire componentry with it on this component we pass in a prop called theme equal to the theme object we have just created this is nothing but our custom theme now what happens is create theme function merges our object with the default theme and provides it to all the underlying components if we take a look at the browser we now have an orange colored box and what is great is that secondary dot light and secondary dot dark are automatically created based on this main color so back in vs code specify secondary dot light and we see a lighter orange specify secondary dot dark and we see a darker orange this is how you overwrite a color from the palette now another common requirement is to add new properties both at the theme level and at the palette level let's see how to do that in the theme object we have passed in at the top level i'm going to add status which is going to be an object with a property called danger set to a hex value when i do this typescript throws an error status does not exist in type theme options to fix this we're going to use what is called module augmentation in typescript in the source folder create a file called theme dot d dot ts here import theme options from mui slash material slash styles next we declare a module so declare module at mui slash material slash styles curly braces we write an interface theme options and we're going to augment our status which contains danger of type react dot css properties to be more precise the color css property when we do this our error is automatically fixed typescript now knows the theme object can contain a status property let's use this value in a component now to use this value i'm going to use the styled system sort of an approach to creating components in mui responsive.tsx at the top import styled from material ui next create a styled box component so const styled box is equal to the styled function we pass in box as an argument and then parentheses again within parentheses we specify an arrow function we are going to destructure the theme object and we are going to return a set of properties height 250 pixels width 250 pixels and background color theme dot status dot danger when we do this though typescript once again throws an error property status does not exist on type theme to fix this we need to go back and update another interface so in theme.d.ts above the theme options add interface theme status is an object which can contain danger and this is going to be a string now if we go back the error is fixed wrap the jsx with react fragment invoke the styled box component and take a look at the browser you can see a red colored box as expected what we have added is a simple color but you can add any property you wish to next let's see how to add a color within the palette and the custom theme object below secondary add a new property called neutral specify an object and a property called main to this we are going to assign colors dot gray of 500. once again typescript throws an error to fix this back in theme.d.t.s and interface palette options and we specify neutral which is optional and this is of type palette color options however this will only help with the create theme function if we try to use it in our styled component so theme dot palette dot neutral dot mean we get the typescript error to resolve this above palette options and interface palette neutral of type palette color this once again is optional if we head back to muirresponsive.tsx the error is fixed head back to the browser and we see the gray color finally let's see how to add a new color within a palette color by default you can specify main light dark and contrast text as properties let's say we need to add a darker property so below neutral dot main we specify darker as a property and this is going to be colors dot gray of 700. to handle this new addition in theme.d.ts specify interface simple palette color options with the property darker optional of type string in our style component change the background color to theme dot palette dot neutral dot darker this again should be throwing an error so back in theme.d dot ts add interface palette color darker of type string this should now give us autocomplete back in the browser we see a darker gray box being displayed now you might ask me how do we figure out these different interfaces well for that i would point you to the documentation under customization and default theme at the very bottom there is a link to see how create theme function is written click on that link and navigate one folder up to the styles folder scroll down and navigate to createpalette.d.ts here you can see all the interfaces related to the palette object use this to create your own custom theme like the way you've just learned how but this is pretty much how to customize theme in material ui with that we come to the end of the series on material ui hopefully you've got an insight into how some of the components work and the different props that can be applied mui has a great set of components to accelerate the development of any react project you're working on and it is another check mark for me in making this channel a one stop shop for react and its ecosystem i sincerely hope you have enjoyed the videos and if you did please do leave a like and subscribe to the channel as always thank you for watching and until next time take care you

Channel: Codevolution

Views: 68,059

Keywords: Codevolution, React, React Material UI, Material UI, Material UI React, MUI, React MUI, MUI React, React Material UI Tutorial, Customizing Theme, Material UI Customizing Theme

Id: ZyQlpX7lCRE

Length: 13min 52sec (832 seconds)

Published: Thu Apr 07 2022