Material UI Tutorial #15 - More on makeStyles

In tis Material UI tutorial we'll talk more about the makeStyles hook . I'll hosw you how to access the theme object inside the hook, to use theme values & also show you how to pass arguments from your components into the makeStyles hook too.

🐱‍💻 🐱‍💻 Course Files:

🐱‍👤🐱‍👤 JOIN THE GANG -

🐱‍💻 🐱‍💻 My Udemy Courses:

🐱‍💻 🐱‍💻 Useful playlists:

🐱‍💻 🐱‍💻 Other links:

🐱‍💻 🐱‍💻 Social Links:

[abraraltaflone]

You are the person from whom i started my flutter journey. Thanks !

[Mincher]

If you're following along with these using the new v5 of Material-UI, you will need to ensure that you run:


This will resolve an issue with theme.spacing(3) throwing an undefined error.

[mr_funtor]

@3:45 if you are using v5 you can do this:

const fClasses=(note)=>{
return{
test:{
border:note.category === 'work'? '1px solid red' : null
}
}
}

const classes = fClasses(note)

Then you can bring it in you component like this:
<Card elevation={3} sx={classes.test}>
*rest of the code*
</Card>

[scoozak]

It's just matter of time when this course will blow up, I find it potential ✌️

[mr_funtor]

In 2023 @1:10 if you are using v5 you can do this:

const classes ={
page:{
background: "#f9f9f9",
width: '100%',

}
}

Then in your component (I used a 'Container') do this:

<Container sx={classes.page}>
{children}
</Container>

[susmitobhattacharyya]

At 4:41 apart from doing it the way it is shown we can do it using short circuit evaluation

const useStyles = makeStyles({
test: { border: "1px solid tomato" },
});

export default (props) => {
const classes = useStyles();
const {
note: { title, details, category, id },
} = props;
return (
<Card className={category == "work" ? classes.test : null}>
<CardHeader
action={
<IconButton onClick={() => props.handleDelete(id)}>
<DeleteOutlineOutlined />
</IconButton>
}
title={title}
subheader={category}
></CardHeader>
<CardContent>
<Typography
</CardContent>
</Card>
);
};

[raptorinc]

Best tutorial !! Shaun is the best teacher!!!

[darizabalo]

Hi Shawn, is it possible to mix the parameters theme and note? You showed them separatedly but not mixed. Thank you, great course!

[alibavarsad]

Hey BIG Ninja, can you please update your material ui course with the new version of MUI? because in V5 there is no option to use makeStyles and useStyles

[BladesGamings]

Thanks for the good quality content again! Also could you do a updated Redux with React tutorial?

[lashachan]

I learned a lot from you. The best tutorials on Youtube. Please, do a tutorial on Django. I know you have one but it is a little bit older. I really, really want to learn Django from you.

[marcscherzer]

Thank you Shaun, cool as always! It would be a pleasure if you create a tutorial of Ant Design / Ant Design Pro :)

[yunger]

Amazing! Didn't know about passing values in the useStyles hook, I was just adding the entire makeStyles hook inside the component lol. Thanks for the great content Shaun :)

Also, there is something I've noticed on the create page. When you click in a radio button, the FormLabel disappears 👀
The color is changing to #fefefe when focused.

[hasnathabdullah]

should i use makeStyles or externel css file in real world projects
???

[tommasen]

Hey man. Could you do a tutorial making an actual responsive website from scratch using react or next? Having hard times making them responsive, especially when it comes down to making a navbar responsive and fully working.

[Frostfyre]

So far I have been successful in translating all of your work with useStyles into the new sx prop. But I am unsure how to do the anonymous function that takes the notes prop in and have that work with the sx prop. Does anyone know how to accomplish this? Thank you!

[kyrierevival]

is return is the same as putting in parenthesis?

[alphatech]

CAn we use @media query in makeStyles? if yes, how?

[anastasiabrade]

makeStyles API will be deprecated in next version of Material UI and removed in version 6. It’s good to let people know that it’s there but discourage using it and actually it’s even better to show how you can apply styles to MUI components using other css-in-js libraries.

[brianotts]

Any idea how the theme object is passed into makeStyles?