The good parts (you might think)
- It looks easy (not a lot of code)
- It looks maintainable (because it is not too big)
- It looks extensible (className prop)
The bad parts
- There is no way you can know what color is passed in beforehand
- TypeScript won't yell at you if you pass "foobar" to the color, because it is a string.
- PurgeCSS can't minimize / strip the dynamic css
- The className introduces hidden/implicit variants/states of your component, this will be a nightmare to refactor later. You change one thing, it doesn't work because in some obscure spot you added a className that overwrote something.
Here is a good example: https://gist.github.com/RobinMalfait/490a0560a7cfde985d435ad93f8094c5