Just wanted to thank you for taking the time to make this video. I'm using MUI5 and I almost threw my laptop out the goddamn window trying to understand why makeStyles wasn't working. Guess it's my bad for watching a tutorial older than a year ;) Again, thank you!
Thanks, this is very good. I appreciate your efforts to explain so clearly. I have a suggestion. May be you could consider cut/paste and I believe the video would flow a little better.
Hey thanks! I've been having a hard time understanding the docs in regards to this so my entire project was filling up with the sx command, which I would like to limit. Your video made this much easier to understand.
Really appreciate you putting up some mui v5 tutorials! If you ever offered a udemy course I'd buy it in a heartbeat. It's hard to find resources or figure out the docs for some things with a new release.
You are welcome, these have been fun to create! There is a Udemy course dedicated to MUI, I didn't create it but I included a (affiliate) link in this video's details. It is great content and tons of value (40+ hours and a low price as Udemy goes). However, the creator made it for MUI v4 and he last told me he planned to update it for v5 in March. The biggest changes for v5 are the sx API, the styled API, and the stack component for layout. I have a tutorial for each at my site, smartdevpreneur.com/, and a video for each on this channel. If you take the Udemy course and review the new APIs that I wrote about, you should have a strong knowledge of MUI.
I just finished creating a course on Udemy! Check it out here: www.udemy.com/course/advanced-material-ui-component-styling-the-complete-course/?referralCode=4BF967AA38E8C00D52A4
@@lycan2494 Awesome! Your support means a ton, and I believe the course will deliver incredible value for you. There's a Q&A feature in Udemy, reach out to me there if you have any questions!
Hi Victor, I have two videos that might help. This one shows how to use the new 'sx' styling API (including how to use it with breakpoints): ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-zV-jDJx6XjI.html This one is an example of breakpoints being used on the Grid: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-B7rDus0sMRw.html
Excellent video. Usually I wrap my components to extend the base MUI library, so I will have control over props passed and styling, but it seems that is not needed, and we can achieve all this using theme? Or is it still best practice to wrap MUI components to create our version of say MUI-Button etc? Thanks!
You can use the theme or wrap components using the styled API and still pass props. Which one to use depends on the situation and your goals, but theme is most abstract. I made this video showing examples of when to use theme, style API, or sx prop: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-jlHXgu38amM.html
Hi M Z, I updated the code linked in the video details to include passing props to Styled Components. They can be accessed using an arrow function. Here's the link to my example: smartdevpreneur.com/material-ui-styled-components/#Passing_Props_to_Styled_Components
Thank you for the video . I would like to ask how can you call the element from another component. For example in styled component we can create different element with custum styles and callthem by import anywhere in the project. How can we call in MUI . Thank you
That's exactly what you would do in MUI. Follow the link in the video details, I have a working example that imports a component that uses the styled() API.
Hi Christopher, I updated the code linked in the video details to include passing props to Styled Components. They can be accessed using an arrow function. Here's the link to my example: smartdevpreneur.com/material-ui-styled-components/#Passing_Props_to_Styled_Components Theme can be accessed in a similar way. Wrap the component in a theme provider, then the theme will be available to the styled API using an arrow function. See this example from the docs: mui.com/system/styled/#using-the-theme
Great question! I updated the code that is linked in the video details. It now includes an example of passing a prop to the styled API. The short answer is that props can be accessed using an arrow function. smartdevpreneur.com/material-ui-styled-components/#Passing_Props_to_Styled_Components
Good question. It will set the color of text in the StyledPaper component. It's not actually affecting anything in the video, I originally had some text that I replaced with a button.
