I'm really glad I stumbled across this video. Seems like you have a Buch of videos that will be useful for my current tasks. Thanks, bud. Appreciate your work!
@@imashutoshsharma hell yeah. Tailwind+ mui. I love write css with tailwind but i getting confused how to create beauty component like mui. Specially for the date time calendar
love your content. i was sceptical first but turns out you have the newest material on youtube. some of the other youtube tutorials are 1-2 years old and the content is outtaded and as a learner , it's hard to know what's depreciated. thank you :)
What a nice and fluid class! Thank you so much Laith, I really loved this video (mui gave me some really bad headaches...) and the way you talk. I really did not need the subtitles and this also makes the flow of the video so much better to me. Thanks again and best regards from one more more Brazilian fan and subscriber.
Does anyone know how to do the thing at 40:58 where he splits the single line Rating component into a bunch of lines? I keep seeing it in various videos but can't seem to find the key combination.
Sir, you are a godsend! I'd been looking for a decent MUI5 tutorial for hours. This has got me on my way. :D Shame on most of the commenters below. It's a free course, you're not entitled to anything. Stop acting like spoiled little brats.
Man, this video is just A W S O M E , i came here that i know few stuff , and it make me arranged , and give the approach that i needed, thank you thank thank you
You're awesome. The amount of knowledge that you share is overwhelming for me, I can't decide what to start with. And everything for free... Thanks man. PS. I'm waiting for SQL with NodeJS course :)
Great video, very well explained. Thanks a lot. I bought a premium template(the front) from mui, but i didnt know how to adjust and work with it. Now i can thanks to this video. Thanks man!
It looks very useful, but I got error on 48:30 . Can anybody help me please? Server Error Error: Attempted to call createTheme() from the server but createTheme is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed props of a Client component.
Halfway through the video you started talking really slow like you were dead tired and you just didn't want to do the tutorial anymore. Then I realized my playback speed was at 0.75 LOL. Anyways love the tutorial
Thanks for the tutorial! The files in the components and pages folders - shouldn't they better have the .jsx extention? For example components/AppBar.jsx
Hey. I'm starting a new position and my employer said that I should go through Materiaul UI and said that they use "withStyles" as well. As much as I was able to understand, "withStyles" is legacy at this point and is not included in the way Material UI is supposed to be used? Is this correct?
Great video, really appreciate it! But I wanted to suggest: don't use index as a key (bad practice), you have id's in your data, so you can do key={city.id} and key={tour.id}
Hey, guys! There is so many ways to style components in MUI, I got confused. How do we create global styles that we can reuse in different components across websites? Why do we need styled() if we can use sx inline styles or create styles object and place all styles there, than use for example?
In new version of MUI, we can customirize our components by three ways.Use sx={css styles} for MUI components only.Style={} and styled("div"/MUI Components){css styles} works for any components from your app.
the component describes the HTML element. In some cases, you wanna have an H1 which is a small bold text. And for the card name, you wanna have an h2 element, with a size of h4. For SEO purposes it's important to have h1, h2, and h3 tags.
Thanks for this tutorial though I am finding MUI v5 in general very painful as there are so many breaking changes. the most annoying is the replacement of styled instead of the good old makeStyle. Do they expect us to create individual styles for each DOM element ? this is really bad move. Reminds me of horror stories of Angular migration when many people got burnt out. I am thinking about moving to more reliable CSS frameworks like Bootstrap etc,
Update: I can't believe it was that easy, all I had to do was adding these parameters to the main Grid that contains all the items, for extra small, small, medium, large and extra large devices:
It's funny how in these documentation-based tutorials, the instructor acts as if he does not know which component to use then he goes straight to that component. In an actual situation, it wouldn't be that quick. Also, the way this documentation is formatted is not intuitive at all. We need a hierarchy showing which components are meant to be the parent and which should be nested and whether we should use semantic HTML tags like 'main' or only rely on MUI components. The only reason why I am using MUI is because it's responsive and that saves me a lot of time.
![Learn Material UI in One Hour - React Material UI Project Tutorial [2022]](/img/1.gif)
Very helpful. Watching this will save me more time than it took to watch.
Thank you for this course. Not long, not short, and focused on the subject, Material UI
I'm really glad I stumbled across this video. Seems like you have a Buch of videos that will be useful for my current tasks. Thanks, bud. Appreciate your work!
Laith has done it again, omg I cannot take this awesomeness anymore ,😭😭😭. Exactly what I was looking for
Anyone votes for a Tailwind + React/Nextjs series in the future ?
Tailwind with mui 🙂
@@imashutoshsharma hell yeah. Tailwind+ mui. I love write css with tailwind but i getting confused how to create beauty component like mui. Specially for the date time calendar
@@hooyah why would you recreate it?,when you can just use prebuilt ones and build powerful applications faster
It's meesy
@@yoyo-yx1qxsame thinking these kids doesn't know what an application is they just wanna customize everything
Thank you. This was an excellent introduction to Material UI, both the pace and content were first-rate.
love your content. i was sceptical first but turns out you have the newest material on youtube. some of the other youtube tutorials are 1-2 years old and the content is outtaded and as a learner , it's hard to know what's depreciated. thank you :)
just poped on my screen and saw full 1:30hr
thanks for the video
What a nice and fluid class! Thank you so much Laith, I really loved this video (mui gave me some really bad headaches...) and the way you talk. I really did not need the subtitles and this also makes the flow of the video so much better to me. Thanks again and best regards from one more more Brazilian fan and subscriber.
Exactly what I was looking, a perfect crash course on MUI.
Does anyone know how to do the thing at 40:58 where he splits the single line Rating component into a bunch of lines? I keep seeing it in various videos but can't seem to find the key combination.
Sir, you are a godsend! I'd been looking for a decent MUI5 tutorial for hours. This has got me on my way. :D
Shame on most of the commenters below. It's a free course, you're not entitled to anything. Stop acting like spoiled little brats.
I like how you gone rocket fast in the end, true last in office developer) Last 20 minutes dense like neutron star
One of the best tutorials I've seen from MUI5 . Thanks ir!
Man, this video is just A W S O M E , i came here that i know few stuff , and it make me arranged , and give the approach that i needed, thank you thank thank you
This was really well put together. Thank you!
You're awesome. The amount of knowledge that you share is overwhelming for me, I can't decide what to start with. And everything for free... Thanks man. PS. I'm waiting for SQL with NodeJS course :)
Many people use mongodb
Exactly what I was looking for. Thanks Laith :)
very nicely compiled content. Took the edge off...Thank you.
Great video, very well explained. Thanks a lot. I bought a premium template(the front) from mui, but i didnt know how to adjust and work with it. Now i can thanks to this video. Thanks man!
It looks very useful, but I got error on 48:30 . Can anybody help me please?
Server Error
Error: Attempted to call createTheme() from the server but createTheme is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed props of a Client component.
oh my god, nowadays i am looking for mui for business. thx!!!
Outstanding!! thanks for the whole explanation. Hope more videos like this comes for the future
You earned my subscription. Absolute godsend. Love how you go over the documentation instead of just copy pasting.
Such a good teacher. Thank you for helping me
I didn't know this video existed! Thanks bro! Really grateful.
very great tutorial.well explained all the concepts, methods and procedures!
Thanks so much. I just completed your video and must say that I did learn quite a lot.
How long did it end up compiling at 34:50? And do you know why it took so long?
Great video ! best one i found about this subject, recommend it !
I am not able to do what you said at 1:05. I thin I should do Tour({ id }) or something like that but it's not clear for me. Can you help me? Thanks.
Halfway through the video you started talking really slow like you were dead tired and you just didn't want to do the tutorial anymore. Then I realized my playback speed was at 0.75 LOL. Anyways love the tutorial
Thank you so much for this! It literally saved me hours!!!
Thanks from Brazil!
Short and sweet! Thank you.
Thanks for the tutorial! The files in the components and pages folders - shouldn't they better have the .jsx extention? For example components/AppBar.jsx
easy to follow, thanks for the great video!
Hey. I'm starting a new position and my employer said that I should go through Materiaul UI and said that they use "withStyles" as well. As much as I was able to understand, "withStyles" is legacy at this point and is not included in the way Material UI is supposed to be used? Is this correct?
Love Material-ui, Thanks Laith!
7:00, what? cssbaseline, did you read the doc or not?
In this topic `Custom Themes with Providers`
your diverging from the docs way of implementing.
Why marginTop = 0 at 44:00?
When you give numerical values with no units what units are they being converted to ? Is it rem?
Also how can I get that lorem auto typing
MUI is a game changer 💜
Man it is really worth one, Thank You!
Thanks for the good tutorial, keep going mannn!!
I legitimatly applaused at 59:36 !
This was supremely helpful!
For some reason when I add components it just displays a blank page. Is there a fix for this?
once i add themeprovider my output is going blank could you please help
is giving component in typography important for something?? we cant we just use variant because variant is the one filling the requirements
Great video, really appreciate it! But I wanted to suggest: don't use index as a key (bad practice), you have id's in your data, so you can do key={city.id} and key={tour.id}
There is a copy to clipboard button right there to copy the whole code
so how did you know that variant was an array ..? at 47:59
I have this problem with material ui where the styles I write work in development but break in production.
Any idea how to fix it?
Easy to Understand 👍
This is very helpful. Thank you.
Hey, guys! There is so many ways to style components in MUI, I got confused. How do we create global styles that we can reuse in different components across websites? Why do we need styled() if we can use sx inline styles or create styles object and place all styles there, than use for example?
In new version of MUI, we can customirize our components by three ways.Use sx={css styles} for MUI components only.Style={} and styled("div"/MUI Components){css styles} works for any components from your app.
Hi. THanks for great video. Why in Typography we add variant h4 component h2? Why it is not just variant h4 component h4? What is the purpose?
the component describes the HTML element. In some cases, you wanna have an H1 which is a small bold text. And for the card name, you wanna have an h2 element, with a size of h4. For SEO purposes it's important to have h1, h2, and h3 tags.
Great tutorial! Thank you.
just finished this. thank you
Helpful video. Thanks
Looks like one of the image links in your JSON data doesn't work anymore. ID: 5
Thanks for this tutorial though I am finding MUI v5 in general very painful as there are so many breaking changes. the most annoying is the replacement of styled instead of the good old makeStyle. Do they expect us to create individual styles for each DOM element ? this is really bad move. Reminds me of horror stories of Angular migration when many people got burnt out. I am thinking about moving to more reliable CSS frameworks like Bootstrap etc,
How do you make the number of grid items on a row decrease as the screen size decreases?
Maybe it's better to use , , from mui library to achieve the same result?
i would appreciate seeing a modal with a form and how to handle the state of the form and pass it back to the parent container
Excellent tutorial thank you very much.
Excellet tutorial, thank you!
Hey Laith, any plans to do a Svelte tutorial?
Thanks very much indeed bro! you're very powerful
U r just a brilliant devloper
Excellent 👍👍
Simply Excellent
Thanks Laith
how do you change the font family
This looks great
which font are you using ?
Super Cool!
Thanks for the tutorial
Thankyou so much for this tutorial
excelent
thank-you , this was really great
good job. thank you so much
very informative, thanks
Couldn't get grid to work
Thanks for the tutorial
Super! We got a lot!
Спасибо)
Translate:
Thanks!!! ))
What's the benefit of using custom themes vs just giving them a class and changing the CSS? Seems like a lot of extra clutter.
My thoughts exactly. Basically it's for people who haven't learned how to structure css properly. That's all I see.
Can you please do similar tutorial on Primevue UI library for Vue 3?
Is this thing responsive out of the box
Great content sir.
Thank You a Lot 💌
Thanks for the video, but any idea of how to do it responsive?
Update: I can't believe it was that easy, all I had to do was adding these parameters to the main Grid that contains all the items, for extra small, small, medium, large and extra large devices:
@@theguilty6173 this is pretty much the norm for all css frameworks/ui libraries. Nothing surprising
Thank you very much.
Excellent!
wow , thank you so much
It's funny how in these documentation-based tutorials, the instructor acts as if he does not know which component to use then he goes straight to that component. In an actual situation, it wouldn't be that quick.
Also, the way this documentation is formatted is not intuitive at all. We need a hierarchy showing which components are meant to be the parent and which should be nested and whether we should use semantic HTML tags like 'main' or only rely on MUI components. The only reason why I am using MUI is because it's responsive and that saves me a lot of time.
body3 looks deprecated, caption fits instead
Thanks man💪