How disheartening it would be to see such a review on your app, which you made with blood and sweat. It is not a new discovery that a classy and user-friendly UI is necessary to turn your great idea into a successful app. Every developer knew about this struggle until 2011 when Facebook first used React for its newsfeed. Or is there something else?
Before we dive deeper into styled-components, let us take a quick look at React.
What Is React?
As per a report by Statista, in 2022, React was the second-most-used framework, with 42.62% of developers using it. Not just that, there are more than 10 million websites live with React as their development framework.
Now that we have gone through what React and components are, let’s understand styled-components and their pros and cons.
Styled-components is a library built for React and React Native. It allows you to style your React components by writing actual CSS in it, giving developers the flexibility to use their CSS code on multiple projects. This also saves time and effort for developers.
Styled-components utilizes tagged template literals to style React components, which removes the mapping between style and component. This means that when you are creating your styles, you are actually writing a normal React component, which has your styles attached to it.
Yes, the styled-components library is easy, flexible, and amazing, but just like everything else, it also has its pros and cons. What are they? Let’s see:
Pros Of Styled-components
1. Allows You To Write CSS Inside The Components
2. Allows Type Checking
3. Supports Theming Out-of-the-box
4. Styled-components Offers React Native Mobile Support
5. No-class Policy In Styled-components
Styled-Components use props instead of class. No class basically means that you do not have to use “this” in your code. Which helps in debugging and improves the overall readability of your script.
6. Supports Server-side Rendering
By using style components, you enable your stylesheet to be rendered on the server side. By enabling server-side rendering, your page can load faster, improving the user experience. Not only that but when rendering on the server side, search engines can load and crawl the content faster and more efficiently, which is vital for SEO.
Cons Of Styled-components
1. It’s Not Framework Independent
2. Poor Readability
3. Styled-components Are Compiled At Run Time
4. Extra Build Tools Are Required
To enjoy all the above-listed pros of styled-components, you have to add some extra plugins. These plugins are required to enable your styled-components to be written separately, to enable server-side rendering, and more. Some such building tools are Babel plugin, Babel Macros, TypeScript Plugin, Stylelint, etc.
5. Mixing CSS Modules And Global CSS Classes Is Cumbersome
Global styling, such as header, body, HTML, divs, etc., is not component-based. So using them with CSS modules gets difficult for larger applications. Mixing these two requires a lot of wrapping and complex coding, which makes the styled-components a rather difficult job.