Remix^1 has an interesting approach here; they encourage use of traditional CSS (vs CSS-in-JS), but the styles for a given route are scoped to the component.
That’s a good fit when each route needs a lot of custom styles and each one is developed by a separate team.
However, it doesn’t really fit well if a brand-themed app is developed by a single team. Consistency is easier to maintain when styles can be reused across the application, and things like styled-components don’t work that well there since they tightly couple components to styles, so you need a theming system on top of them… which is silly, because CSS itself is a theming system.
CSS modules is a bit better, but even that encourages encapsulation which is necessarily broken if the styles need to be shared between components.
You seem to have misunderstood; Remix promotes the use of bog-standard CSS. Literally nothing about it in any way inhibits reuse of styles across the app.
Not sure where you're going in critiquing styled-components.
Well, does it keep the styles with the components, or does it expect devs to create a separate folder for shared styles? If there are lots of shared styles, that equates to having two sets of components: one React, the other CSS.
However, it doesn’t really fit well if a brand-themed app is developed by a single team. Consistency is easier to maintain when styles can be reused across the application, and things like styled-components don’t work that well there since they tightly couple components to styles, so you need a theming system on top of them… which is silly, because CSS itself is a theming system.
CSS modules is a bit better, but even that encourages encapsulation which is necessarily broken if the styles need to be shared between components.