I did, although I can’t say I’m an expert with it.

The only time I find it necessary to write styles into the HTML is when I have dynamically changing dimensions, such as heights or widths. Other than that, I find it easy enough to predefine classes that provide alternate styling, then modify the class attribute of the element in question.

The issue with modifying the styled component dynamically is it forces Styled Components to rewrite the component’s entire stylesheet in the browser. This means the browser has to recalculate the entire document’s styling, not just the changed element and its children, every time a changed property modifies the stylesheet. It’s simple, but not as efficient as adding and removing class names in the tag’s class attribute.

I am glad to hear that the practice is to create the styling component separate from the business logic component. This does, however, mean potentially doubling your codebase for anything that’s styled.

It still seems to me that a regular CSS/SCSS file was born for this, and lets the browser optimize the rendering context once and not worry about it later. Letting the JS focus on DOM manipulation and event handling lets the CSS stand by, optimized to be attached where required.