It's time to learn about payment gateway and give my later web apps an ability to channel a few dollars from pocket to pocket. I'm basically desperate to add this functionality to my web apps. Adding a payment processor feature will expand the possibility of what I can create. Not to mention that everything is online now, so as a developer, I'm kind of outdated with not learning this ability earlier. In order to learn about it, I'm creating an ecommerce playground app where I can test many different payment processors such as PayPal, Credit Card, etc. I'm imagining a simple cart system with pluggable payment processor choice.

For this project, I also want to use the latest skill that I've learned recently, which is Material-UI. It's called MUI now and the version 5 has just been released the other day. What I learned from The Net Ninja was Material-UI v4, so I thought there might be a good amount of changes in v5. At first, I tried to just ball it in and see the differences as I move forward. Then I stumble upon a simple challenge of modifying an element's CSS property. With CSS and alike, I can just use the old select-and-style procedure. You know? Like a normal CSS. MUI v4 was rather similar to CSS modules where I can styles hook and access the CSS values via object properties.

This is not a big deal because I can apply the styles that come out from this hook to any element, whether they are MUI components or your usual divs. Early in this playground app, I found a need to modify "text-decoration" value on react-router's Link component. I looked at v5 documentation and I found that the previous "makeStyles" function and a few others in the styles section are declared as legacy feature. Meaning that it's not encouraged to be used on new apps. That also mean MUI v5 has a new way of doing this. I searched through the documentation and I found a property called "sx". I checked v4 docs and I found out it's not a new feature, but rather MUI decided to make this prop the new way to customize your component's styles.

To put it shortly, "sx" prop is an inline CSS. I somewhat detest inline stylings because it clutters the markup a lot and I always prefer separating my stylesheet from its markup whenever possible. This is also the reason why I'm rather reluctant to step into Tailwind CSS which many people are falling in love with. I've a mixed feelings about this because I love MUI's theming system. I then decided to be open minded with this, as always, because I generally don't mind with CSS-in-JS solution like Styled Component and Emotion. Let's say, the benefits outweigh the flaws.

With that in mind, I feel a need to read this documentation a bit more thoroughly because from my little experience with MUI, I feel that this UI library has its own system. That means it has their own ways of doing things. Although I also feel that MUI isn't that opinionated, but it's always good to follow a library's standard to make the development progress runs smoothly. I don't know, I'm being open minded. I'll take everything that may come my way. That's it for today, thank you for reading and have a nice day.

 This free site is ad-supported. Learn more
​