Material UI Tutorial #16 - App Bars

Показать описание

Hey gang, in this Material UI tutorial we'll talk a little bit about app bars & implement one on our website.

🐱‍💻 🐱‍💻 Course Files:

🐱‍👤🐱‍👤 JOIN THE GANG -

🐱‍💻 🐱‍💻 My Udemy Courses:

🐱‍💻 🐱‍💻 Useful playlists:

🐱‍💻 🐱‍💻 Other links:

🐱‍💻 🐱‍💻 Social Links:

Рекомендации по теме

Комментарии

It'd nice if have used Boxes instead of divs, they serve the same purpose, but anyways, superb as always, a lot of people do videos but you always sprinkle a pinch of extra value by pushing more in depth info or tricks on your videos not to mention your remarkable personality, ty for taking ur time to share :)

ellsonmendesYT

this helps immediately with my university project, thank you!

rickpattson

Thanks for this tutorial. It's easy to understand.

apelmahmud

At 5:12 you can do

const classes = {
toolbar: (theme) => {
return {
my: `${theme.mixins.toolbar.minHeight}px`,
};
},
}

const Layout = ({ children }) => {
const theme = useTheme();

<Box
}

ivanvielledupaya

If you are using Mui v5, you might notice that the "mixins.toolbar" don't work. I fixed it by setting the toolbar class to an arrow function: toolbar: (theme)=>theme.mixins.toolbar, then pass that class to a Box component like this, <Box sx={classes.toolbar}><Box/>.
Happy Coding :)

deandrenelson

This video help me so much, thank you so much S2!

minhthongvo

For some reason the calc function was being ignored by my CSS so I added a !important flag before the closing backtick and it worked.

Mincher

Thank you. Please update the course to V5.

orensampson

how i run this project
via npm command ?

DanishKhan-hlsz

How can i float my link buttons to right in material ui

wale

Thanks, does material ui contain something more complex or it is just simple as this

scoozak

if className={classes.appbar} does not work:
Just put style = {{width: `calc(100% - ${drawerWidth}px)`}}
good luck

youneskhellaf

theme.mixins.toolbar does not seem to work, probably because of mui fixes. This worked for me, even though its a quick fix. Anyone seem to have this worked can add on. Great videos buddy. very clear explanation.
<Box style={{ marginTop: 60 }}>
<div
</Box>

penang-teams

could u plz tell me about :: Max height menus in MUI ??

mohanj

Bro m looking for a production level mern stack course. I watched your react playlist since then I couldn't find better teaching then you it would be helpful for me if you make a course on mern stack. I know all of them but when I sit to make applications then I get stuck in state management and on lots more places. If your are gonna make a course then inform me. I'd buy it from Udemy if u put it there.

PlayWithAyaan