Material UI in React #3 - Styles - adding global theme and overriding default styles

Hello fellow react devs! I am happy to share another video. In today's eposide you will learn how to add and customize theme provider, which is a place where you can set your global styles. You will also find out how to override styles using sx prop. As an extra I will show you how to add a reusable button component!

Material UI in React #3 Chapters
0:00 - 0:12 - Intro
0:12 - 3:10 - Reusable button component
3:10 - 4:39 - Overriding styles using SX props
4:39 - 5:59 - Adding global Theming
5:59 - 8:22 - Styling out MUI Button globally
8:22 - 9:07 - Palette (theming)
9:07 - 10:22 - Font family (theming)
10:22 - 10:59 - Spacing (theming)
10:59 - 11:33 - Breakpoints (theming)
11:33 - 12:03 - Outro

Completed lesson 3 on Github:
If you wish to pull the previous version just pull the 'main' one, as it includes lesson #2.

📚 Support me:

🌎 Find me here:

Links:

#react #materialui #styles #theming

[doctoreravani]

It is very good that you give an example of a real project. Keep it up, people will understand the value of your work

[denmccormik]

Really looking forward to new videos. When I started to watch your course I had questions according to mui/styles from previous version because almost every tutorial contains not relevant approaches. And now they are gone. Thank you for awesome example of using mui, really usefull 'reusable' approach and hope it will be continued.

[sipandchipgolf]

Big fan, had a couple dependency issues but they were easy to follow with some terminal messages. Great job. For a first series this is very impressive. Can't wait to see the rest

[ibnulferdous]

There are so few tutorials on MUI V5 and theme styling. Thank you so much for such a tutorial. It was helpful for me.

[dominikseitz]

these videos are extremely helpful, thanks a lot

[fao]

Great Video and thanks for your work and sharing your knowledge. I am glad you are including the code for your tutorials because is hard to follow everything you are saying. Also, I notice that the sound improved in this video, it was hard to listen to Tutorial #2. Again, thanks!

Thank you helped me, hope you have million subscribers to your channel very soon, i have done from my side.

[dieterammann]

Hello my friend.
I have a question for you, I hope you continue with the MUI V5 tutorial.
I've seen a lot of MUI V5 tutorials but they were all too old.
Thank you in advance, Merry Christmas and a Happy New Year
Dieter

[denmccormik]

Also dropping comment for separate video about the fonts.

[rominagimenez]

Hi, I tried the same example but give me an error on index with element={<App />} I'm using typescript maybe is that the problem, how can I solve this?
Property 'element' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Route<{}, "/">> & Readonly<RouteProps<"/", {}> & OmitNative<{}, keyof RouteProps<...>>> & Readonly<...>'.

[devdive]

how can I pass the props to the styled component in mui5?

[sujanmongar]

Can you make videos on mobile responsive please! This would help me lot in my job application projects

[learntry]

please use background color in your IDE white or make your font brighter ... . Personally I liked the content but its difficult to read

[shubhampawar]

Atleast zoom when writing code. On mobile can't even see what's going on

[mattmarkus]

4:10 You're going to save us from the boring part of overriding the styles? Why don't you explain that, it's valuable to know how to do that. Copy paste isn't very helpful.