React Material-UI Themes: Customize Material Components for your Project

In this video, we will have a look at how you can customize react material-ui to align with your company identity (design system) and products.

We will create a material-ui theme to customize Colors, Buttons, TextFields, checkboxes, typography and more.

We will override some css properties and also define default properties (props) for some components - for example, we will disable ripple for buttons and checkboxes. We will also disable the expansion animation in TextFields changing also the border-radius and colors.

Timeline:
00:00 Introduction
02:08 Changing material-ui colors (palette)
03:59 Typography customization - fontFamily and fontSize
05:35 Border Radius customization
06:30 Changing default spacing: Space between elements
07:45 Overrides property: Button CSS overrides
08:30 Remove textTransform uppercase from buttons
09:18 Change fullWidth class from buttons
10:18 Change button padding
10:42 Default Props customization: Remove Ripple Effect from buttons
11:40 Default Props customization: Set color=primary and variant on buttons
12:40 Customize material-ui TextField component and checkbox
21:00 Customize MuiPaper and MuiCard default elevation
22:10 Conclusions

----
----

----
Follow me on:

[siddhantpagare]

As a designer the color hurts my eyes but what an amazing video, this is exactly what I was searching for! Thanks

[dianwijaya]

I looked for this in the official MUI documentation but I was very dizzy, but with this video it's very easy to understand and saved my time, thanks.

[washingtoncampos]

I couldn’t pass here without saying that this video is awesome, this kind of customization helps to maintain the code architected and simple to add new features on front end, thank you very much for the amazing content 👏🏻👏🏻👏🏻

[odek]

Thanks a lot for the knowledge, I was confusing why people keep telling me Material UI is highly customizable and this video proof me :)

[chathurank]

I'm a designer and I was skeptical about Material UI too. Now, you convinced me. Thanks!

[visintel]

I love how you taught very clearly and straight to the point while absolutely destroying every design rule. You got my sub

[DanCortes]

This video couldn't have come at a better time for me. I was torn between Ant Design and Material UI for a project I'm just starting to work on, and how easy Material UI seems to customize definitely sold me on it. Thank you!

[ghostinplainsight]

I think material UI is everything I have ever wanted in a UI framework, nice semantic markup that's simple, well thought out and open to customisation.

[oxygenmoldova]

maaan your energy is just Wordless! I am very thankfull that I found your channel!

[Muaddibkhan]

I can not stress this enough how concise and helpfull this tutorial has been for me, You saved me hours of work in just 20 odd minutes. Thank you sir

[arrontaylor]

thanks so much for the video! i've been reading up on material ui for the last 3 hours and you gave so much info in such a short amount of time

[itssammy]

Very nice tutorial, aways liked material UI but everytime i struggled with costumization, this helped me a lot

[ggascoigne]

Very nice. I've used mui for a while now and still found a lot to learn in your video. Thank you.

[ВадимМанаков-щы]

Супер. Наконец я нашел хорошее объяснение кастомизации темы в material-ui (интуитивно понятно, что говорит автор, хоть я португальского никогда не изучал и не слышал). Спасибо

[christianbaidoo]

Thanks for the thorough explanation Bruno

[guillemgarcia]

Nice! U completely nailed the theme customization on Material. Such amazing framework really, it is very much customizable.

[cagrakar]

We should have seen sth about this topic in youtube. Here, Bruno did it again.👍🏼 Thanks again for clear and simple explanation.

[richie]

Brilliant!! Very well presented and in a comprehensible format.

[romeoangelesjr]

A complete tutorial series of React Material UI is going to be great <3

[lacerdev]

Thanks for that, man! You saved me a lot of time! Your explanation is quite simple to understand and covered a lot of content at same time. Thanks again!