In this article I've explained a hybrid approach for writing style related code. This approach relies on style objects to capture the styles that are commonly used for a group of components, such as dialog buttons. Particular combinations of styles (picked from style objects) can be captured in trim objects. By setting the trim property of a component, we can easily change its appearance. Since trim objects are type-checked, we can't forget to apply any of the required styles. Finally, intrinsic styles can be placed in a .scss file. I still find this useful, but you don't have to.

I've used this approach succesfully in my Vidlito application (that I will blog about soon), and I like it a lot. However, it is still experimental, and I will continue to use it to better understand its pros and cons. If you want a more proven approach, then I would go with inline styles using a library like TailwindUI, DaisyUI, HyperUI or FlowBite. However, also in this case, you will probably move code to custom components, and then the ideas I've outlined here may prove to be useful.