Material UI Tutorial #6 - Custom Themes

Hey gang, in this material UI tutorial we'll take a look at how to create custom themes (colours, spacing, typography, etc) for your material UI projects.

Special thanks to new ninja members:

🐱‍💻 🐱‍💻 Course Files:

🐱‍👤🐱‍👤 JOIN THE GANG -

🐱‍💻 🐱‍💻 My Udemy Courses:

🐱‍💻 🐱‍💻 Useful playlists:

🐱‍💻 🐱‍💻 Other links:

🐱‍💻 🐱‍💻 Social Links:

[brandyn]

If you are going along with this series with MUI past v4, you will have to do some changes.


If you choose to have colors imported from mui, you can do so by:


Then you should be able to follow along.

[maskman]

Knowing how to customize components is really practical and helpful, it makes material-ui very flexible and powerful, thank you Shaun for this tutorial !!! 😍😍😍

[Annie-czjw]

Clear instruction, just keep in mind this is MUI v4. This example is "legacy" and will not work in the latest versions.

[KodiLearn]

I was visiting your channel to know whwre is your new video and fot this notification

[aleeizhere]

in new versions:

const theme = createTheme({
palette: {
primary: {
main: "#fefefe",
},
},
});

return (
<ThemeProvider theme={theme}>
<BrowserRouter>
<Routes>
<Route exact path="/" element={<Notes />}></Route>
<Route path="/create" element={<Create />}></Route>
</Routes>
</BrowserRouter>
</ThemeProvider>
);

[ellsonmendesYT]

I was trying to follow the tutorial but version 6 is out and most of the packages, usages and most importantly the imports have changed :(

[burak_]

Hey! This is the by far best materialUi tutorial. This series should be kept up

[nitinjangra]

sir please tell me, how to solve this error Module not found: Can't resolve 'material-ui/styles'
i try everything last 7 days plz tell about this

[pick]

Please keep this series up man, I really need this. Thanks a lot, you deserve better!

[alexgbraga]

The documentation now says that makeStyles is deprecated in v5.0.6
What's the best approach to achieve the same results now? I tried to head over to the docs, but it's quite confusing and I couldn't find one that is similar to what is shown here

[gradientO]

Wow dude. Take a rest. Series after series. Thanks

[michaelmclean]

I just bought your react course on Udemy after watching some of these videos, I am not great with styling I'm hoping you bring it all together in your course.

[psyferinc.]

i havent commented on this yet? whaaaat .... for za algorithm

[kapilchauhan]

Hey ninja, can you help me with blob http Urls

[TutoDS]

Hi
I have a problem with my custom theme.
On all components works fine, but when I change a color of a box inside a drawer the colors are completely different (I think it’s the default colors)
Can help me?

[MegaJagveer]

One of the best (if not the best) instructors on the internet. Keep it up man!

[kashmirtechtv]

what if we haven't used font weights in crstemuitheme?

[dieterammann]

Dear Sir,
i have a question for you, times a tutorial about
"theme = createTheme", and "useStyles = makeStyles"
from @mui v5.2.3 the old tutorial belomme I nict hin.
I wish you Merry Christmas and a Happy New Year.
Thanks in advance.
Dieter

[robertoraul]

Shaun! I love man😅 cheers from Mozambique! You are currently the Stormblessed Khaladin in my life!

[gaborbeszedics]

Thank you very much, until now I did not understand this theme creation system at all. But you gave me the light :D