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

javascript css reactjs styled-components
Bharat Soni picture Bharat Soni · Sep 19, 2018 · Viewed 13.2k times · Source

I've researching about what's the best way to style your page in React application. I see a lot of libraries to style in react like Styled Components, Glamor, CSS Modules.

In my current project, I am using CSS Modules(mainly to get rid of css conflicts and page specific CSS). I googled a lot about why should I use styled components and CSS-in-JS but I couldn't get any concrete answer. So my question is that if there is actual performance benefit of using CSS-in-JS or styled components or it's just syntactic sugar.

Answer

kumarharsh picture kumarharsh · Sep 19, 2018

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.

Related questions

adding two classes (active class) using styled-components

I am migrating from css to styled-components. My react component looks like the following: class Example extends React.Component { ........code here render() { return ( <div className={ this.state.active ? "button active" : "button" } onClick={ this.pressNumber } > <Number>{ this.…

Read More
Adding transitions to styled components

I have following component in React: const Button = styled.div` width: 30px; height: 30px; position: absolute; right: 2em; top: 50%; transform: translateY(-50%); padding: 0; margin: 0; &::before, &::after { content: ""; position: absolute; background-color: #3d3935; transition: transform 0.25s ease-out; } &::before { top: 0; …

Read More
How to add multiple classes to a ReactJS Component?

I am new to ReactJS and JSX and I am having a little problem with the code below. I am trying to add multiple classes to the className attribute on each li: <li key={index} className={activeClass, data.class, "…

Read More