Material UI Tutorial #16 - App Bars

แชร์
ฝัง
  • เผยแพร่เมื่อ 3 ม.ค. 2025

ความคิดเห็น • 51

  • @ivanvielledupaya9034
    @ivanvielledupaya9034 3 หลายเดือนก่อน

    At 5:12 you can do
    import { useTheme } from "@emotion/react";
    const classes = {
    toolbar: (theme) => {
    return {
    my: `${theme.mixins.toolbar.minHeight}px`,
    };
    },
    }
    const Layout = ({ children }) => {
    const theme = useTheme();
    {children}
    }

  • @deandrenelson7738
    @deandrenelson7738 2 ปีที่แล้ว +7

    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, .
    Happy Coding :)

    • @jayanspaliwal5907
      @jayanspaliwal5907 ปีที่แล้ว +1

      Can you share your code, it'll be really helpful

    • @deandrenelson7738
      @deandrenelson7738 ปีที่แล้ว +1

      @@jayanspaliwal5907not sure if I can find the original code again but I gave an example in my original comment.

    • @johnrbnsn
      @johnrbnsn 7 หลายเดือนก่อน

      @@jayanspaliwal5907
      const classes = {
      toolbar: (theme) => {
      return theme.mixins.toolbar
      },
      ...
      }
      ...
      {children}

  • @ellsonmendesYT
    @ellsonmendesYT 3 ปีที่แล้ว +5

    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 :)

  • @rickpattson7341
    @rickpattson7341 3 ปีที่แล้ว +6

    this helps immediately with my university project, thank you!

    • @luislandry5568
      @luislandry5568 3 ปีที่แล้ว

      I dont mean to be so offtopic but does anyone know a tool to get back into an Instagram account..?
      I somehow forgot the password. I appreciate any tips you can offer me!

    • @tmmi2425
      @tmmi2425 3 ปีที่แล้ว +1

      @@luislandry5568 lol

  • @Mincher
    @Mincher 3 ปีที่แล้ว +25

    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.

  • @orensampson
    @orensampson 2 ปีที่แล้ว +6

    Thank you. Please update the course to V5.

  • @apelmahmud8235
    @apelmahmud8235 3 ปีที่แล้ว +3

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

  • @minhthongvo5989
    @minhthongvo5989 3 ปีที่แล้ว +2

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

  • @penang-teams
    @penang-teams 2 ปีที่แล้ว +2

    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.

    {children}

  • @scoozak1642
    @scoozak1642 3 ปีที่แล้ว +2

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

    • @ridl27
      @ridl27 3 ปีที่แล้ว +1

      check the docs

  • @youneskhellaf202
    @youneskhellaf202 2 ปีที่แล้ว +5

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

    • @minnimau1
      @minnimau1 2 ปีที่แล้ว

      thanks man, hat the same proplem (maybe caused by MUI Version 5?)

    • @youneskhellaf202
      @youneskhellaf202 2 ปีที่แล้ว

      @@minnimau1 maybe... it would be better that u open the documentation, and see it in parallel when u work with the tuto

    • @ishivamgupta1
      @ishivamgupta1 2 ปีที่แล้ว

      THANKS MAN

    • @lingojulia
      @lingojulia ปีที่แล้ว

      Thank you, that's really helpful!

  • @k5g4mer
    @k5g4mer ปีที่แล้ว

    I love this 🤩

    • @NetNinja
      @NetNinja  ปีที่แล้ว

      Thanks KaLiiD!

  • @DanishKhan-hl8sz
    @DanishKhan-hl8sz 3 ปีที่แล้ว +1

    how i run this project
    via npm command ?

  • @prafulrane3591
    @prafulrane3591 ปีที่แล้ว

    Jay bhavani 🔥🔥🔥

  • @PlayWithAyaan
    @PlayWithAyaan 3 ปีที่แล้ว +5

    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.

  • @camilovegag
    @camilovegag 3 ปีที่แล้ว

    Hey, so if I have my children in a different file than my appbar and toolbar, how can I use the mixins?

  • @mohanj2849
    @mohanj2849 2 ปีที่แล้ว

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

  • @fbg3033
    @fbg3033 3 ปีที่แล้ว

    there is a tutorial about login pages and authentication system?

  • @AtomiCoding
    @AtomiCoding 3 ปีที่แล้ว

    sir in in component Layout.js
    [ appbar: {
    width:`calc(100% - ${drawerWidth}px)`
    },]
    this is not working

    • @snowymountaintops75
      @snowymountaintops75 2 ปีที่แล้ว +1

      the minus sign should have a space before and after it

    • @nesrinebelkadi7702
      @nesrinebelkadi7702 ปีที่แล้ว

      @@snowymountaintops75 you saved my day , Thanks a lot !!

  • @samislam2746
    @samislam2746 2 ปีที่แล้ว

    What's the difference between Appbar and Toolbar?

  • @wale66656
    @wale66656 3 ปีที่แล้ว

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

  • @JavascriptForEverything
    @JavascriptForEverything 3 ปีที่แล้ว

    Awesome, I did it old way: .right { marginLeft: 'auto'}
    Now I know new way : .left: { flexGrow: 1 }
    Thanks

  • @rohitb23
    @rohitb23 3 ปีที่แล้ว

    How do you just install a new npm package in a new terminal while react script start is running? I have to terminate it first.

    • @Belden3056
      @Belden3056 10 หลายเดือนก่อน

      He opened a new one, plus sign

  • @vuongqtvn
    @vuongqtvn 3 ปีที่แล้ว

    best tutorial

  • @TheZenithofPower
    @TheZenithofPower 3 ปีที่แล้ว +6

    ah yes the proper order of writing the date.. idk why americans put the month first 😅

  • @codewithfarhad8594
    @codewithfarhad8594 3 ปีที่แล้ว +2

    excellent tutorial but the JSS-IN-CSS thing makes me wonder, why did we ever stop styling with plain old css or saas 👀

    • @ellsonmendesYT
      @ellsonmendesYT 3 ปีที่แล้ว +1

      the idea is get all done with js :)
      but material ui has a mechanism that allows us to work with plain css and also styled components, if you wanna take a look at it, search for material-ui css plugins, some of them don't come out of the box when you import material-ui, requires an extra installation

  • @ridl27
    @ridl27 3 ปีที่แล้ว

    ty

  • @gyanganga8441
    @gyanganga8441 ปีที่แล้ว

    ❤❤