CSS Modules vs Styled ComponentsView other answers to this thread
3.4K+ developers have started their personal blogs on Hashnode in the last one month.
Write in Markdown · Publish articles on custom domain · Gain readership on day zero · Automatic GitHub backup and more
CSS modules are an evolution over vanilla css in that they solve the problem of scoping for you.
Styled components library does that, but also enforces that styles are applied through Higher order components, which is a good practice. In addition it provides good support for theming etc.
So if you prefer stronger conventions, styled-components is a better option. However getting editor support for highlighting css in tagged template literals may be tricky in some editors (I have spent better part of a day trying to make code look pretty in emacs web-mode), even though support is available for many popular ones.
Also, if you plan on using SCSS/stylus etc. for generating the css, css-modules are your only option at the moment, though that may change in future.
Also, with styled-components wrapping third party components can require additional boilerplate, because styled-components builds upon the assumption that components accept
className prop and apply it to the top level node.
If that is not the case, then things will fail silently. With CSS modules, it is easier accomodate rogue components that do not follow this convention. At best, the component will accept some other prop, through which class names can be passed, at worst, in componentDidMount/componentDidUpdate hooks you can inject the relevant class into the DOM directly. This is most certainly not a good practice, but somethings forking a component for some small UI change becomes a frustrating endeavour.