What is the benefit of using styled components over css modules in Reactjs

I have experience with both technologies, have used Radium (another CSS in JS library) and am currently using CSS modules in my projects. Styled components are definitely much better than Radium because they let you style :hover states, etc. But in my opinion, CSS modules are still the best bet, especially if you see that your project is going to grow bigger than 10-50 components. Code sharing across CSS in JS libraries is a nightmare. On the other hand, CSS modules let you compose other classes, import variables from other CSS files and even JS can import variables from CSS.

One of the reasons I love styled components more than any other way of writing css in a React based ecosystem is that it enforces the best practices. As somebody wrote up there that code sharing while using styled components is a nightmare and I can't agree more and thats where the enforcement part comes in. If you are not writing really modular components which is how a React component hierarchy should be designed (atomic components composed to build a function rich modules ), you surely are going to rewrite similar styles a lot of times. But if you can break and compose your components in a really bottom-up fashion using styled components (or even inline styles if you may prefer so), code-sharing is not a problem anymore. Further code sharing shouldn't be a an issue discussed at styling level, sharing encapsulations should rather be a component level stuff in most of the cases. CSS modules is in my opinion a mere className scope limiting tool while styled components provide a more declarative approach to styling in React based projects.

Coming on to one of the cons that I have not been able to wrap my head around is the kind of nested component structure Styled components lead to. I have tried to remain more semantically aware while naming my style components but I am sure there might be other technique to do something about it. I don't find it much of a problem myself and hence haven't put much of an effort towards it.

Styled components would probably be a bit less performant that css modules because there certainly are overheads involved in creating components for styling and rendering them but that would be a miniscule difference.

Can use normal HTML attributes, you can mix in JS if you want to, it supports states, nesting and media queries. And no, it will not all end up in style="" but create a “real” class= attribute and pull out the CSS into head, just like css-modules.

It even allows you to style custom components (not only HTML ones) if they only accept className as prop, so:

const Button = (props) => <button className={props.className}>{props.children}</button>

const CustomButton = styled(Button) display: inline-block; padding: 5px; const Item = () => Click me!

Even though it's also have downside like other technology. Main thing is sharing code between multiple projects could become very harder

If your priority is the speed, glamorous or styled-components is exactly what you could use in your web apps. Writing styles in strings for styled-components may be something unusual, but the visitors will appreciate the fast loaded web page. If you decide to use styled-components, do not forget to install plugin to support syntax highlighting in strings or maybe help creating a new one.

Sass/css and inline styles are also pretty fast, but if you decide to reuse your code for your React Native app be prepared to rewrite your stylesheets. But on the other hand, css and other style preprocessors are a good choice for web applications.