Styled Components React
This article is about the what and why of React styled components. Styled components are one of the CSS in JS styling solutions for ReactJS and React Native. It used tagged template literals which allows you to write plain CSS that is scoped to a single component inside your JavaScript code.
Why would you want to learn Styled Component
To be very honest there are numerous styling solutions when it comes to react and I am not here to debate which is better. The styled component is a library that is adopt by a large number of companies and is one of the most starred libraries in the react ecosystem. If you are here learning about the library, I am guessing you are probably here because a friend or a colleague recommended it.
Features and Benefits
- Automatic critical CSS: The library automatically keeps Crack of which components are render on the screen and injects only their styles. Combined it with code splitting and you are loading the least amount of code necessary.
- No class name bugs: The library generates unique class names for every style. You never have to worry about duplication, overlap, or misspellings.
- Easier deletion of CSS: If you worked on a large codebase that makes use of plain CSS files. It becomes very tricky to keep track of unused classes. With the styled-components every style if tied to a specific component. If a component is unuse which is easily pointed out in VScode and deleting the component will delete its styles as well.
- Dynamic styling: In react, where props drive components sometimes styles also need to be adapted base on props. The style components library makes this really simple.
- Painless maintenance: It is very easy to organize styles with this library. You don’t have to move across different files to find the style affecting your components.
- Automatic vendor prefixing: For some of the new CSS features you might have to explicitly write the CSS property for each browser. With the Style components through you can write your CSS to the current standard and the library will handle the REST.
Conclusion
Learning style components will definitely help you in your career as React developer. You have to know the fundamentals of ReactJS before learning styled-components. If you are new to React please make sure to go through the react.
