Comparison
CSS-in-JSvsScoped styles
CSS-in-JS
the styles are written next to the component and injected into a style tag when it first renders.
Declaring styles in JavaScript so they can be colocated with a component and computed from its props. It gives real scoping and dynamic values without a build convention, at the cost of shipping the styling engine to the browser and doing style work during render. Runtime libraries interact badly with server rendering and streaming, which is why the ecosystem has been moving back toward compile-time extraction.
Full entry →Scoped styles
the class in the output is a hashed string, so nothing else on the page can accidentally match it.
Rewriting class names at build time so a component's styles cannot collide with any other component's. It gives you the isolation that naming conventions used to approximate by hand, without giving up plain CSS files. The trade is that the class you see in the browser is not the class you wrote, and styling a child component from a parent now requires an explicit escape hatch.
Full entry →