I've finished the Material-UI (MUI) tutorial by The Net Ninja. A short and concise enough tutorial for me to get up and running with MUI. I may make it sound simple, but compared to most tools I've worked with, MUI isn't that big of a tool. Most of my first impressions were quite on mark. I can use my Bootstrap approach, which is take the provided component and modify it accordingly. The "modify" part can be different because MUI pretty much uses the CSS-in-JS approach, which is using CSS inside a JavaScript file similar to Styled Component. Between separating CSS from JS and using CSS in JS, I don't mind either approach. I'm pretty much comfortable with SCSS + CSS modules lately, but I also don't mind using Styled Component or MUI's approach. Or maybe, I haven't built that big of an application where I can judge each approach as the application scales up.

From what I've learned in this short stint, the main parts of MUI are themes and "makeStyles" function. I've spoken a lot about how I love the theme in the previous post, but I think there is still a bit more to explore for "makeStyles" function. It's a function which creates a hook. This hook will expose all your defined CSS within it. The approach is very much the same as CSS modules where you can access it via object properties. But I still have few questions for its pseudo-classes and pseudo-elements. Well basically, I wonder if I can use SCSS-like syntax in these objects. I'll have to test it in my small project soon.

That will conclude it for MUI introduction. Pleasant tool and interactive UI specification defined by Material Design (Google). Currently, I'm working to add a few new features to my personal website. Once I finish it, I want to build a simple ecommerce website that will serve as a playground for many payment gateway system. And in that small ecommerce project, I'll use MUI too. Let's get into it. Thank you for reading my post and have a good day.

 This free site is ad-supported. Learn more
​