Are you looking for a new way to approach CSS in your React applications?
In this post you will discover the some of the benefits, features along with some tips that helped us along the way with Styled Components.
What's the problem with built in React styling?
Nothing… really.
The React team did a great job of implementing various solutions to styling out of the box, however when working with large applications you want something that can scale effectively. Another issue for me from the start with in-built styles was file bloat. Having to create a corresponding .css file for each component and then import it took lots of time and just felt unnecessary.
Inline styles solved that problem however I was always put off by the possibility that I might want to move away from React in the future and having to strip these styles out manually would be a tedious task to say the least.
Styled-Components - Use the best bits of ES6 and CSS to style your apps without stress 💅
Benefits of Styled-Components:
Same Syntax As CSS This might seem like a given but it's surprising how many libraries out there such as Aphrodite force you into camel casing styles and using strings. I have used them and continue to do but it's just a minor inconvenience compared to styled-components that uses the same standard that you are used to with CSS.
Community & Documentation The community support for styled-components is also rock solid, there are lots of questions and answers for common problems on StackOverflow, blog pots along with a fantastic documentation website covering all you will need.
Regular Enhancements & Releases When choosing any front end tool or library you want to be assured that it is actively improved both from a performance and feature perspective. Styled-components has an active roadmap and regularly releases updates. Check out the latest features in this post: Styled-V4
Passing Props & Theming The ability to style based on props passed from parent components is a breath of fresh air for a style library, allowing your components to adapt to changes. That paired with the ability to define custom themes makes your components more re-usable and readable than ever.
Nested Selectors Another great benefit if your coming from a SASS background is the ability to use nested selectors, you can define a parent component and then easily style a <div />, <p />, or even <span /> contained within it. Media queries and pseudo selectors also work the same as before.
Global Styles Styled-components also comes pre-built with the createGlobalStyle helper function (replacing the legacy injectGlobal) to allow you to easily define styles that you want to reuse throughout your app things such as custom colors, heading and fonts.
A Styled-Component Example
Let's say we wanted to create a simple <Hero /> component in React using styled-components. It could be created as follows:
*Don't forget to do an npm install - save styled-components beforehand.
A big part of styled-components is flexibility, you can create as many components in a single file as you want and then have standard elements nested within them.
You can also easily add media queries and pass props through that may be defined in a parent component or defined in the global styles.
Styled Components Tips
Separate Your Styles: One thing that that became apparent when creating multiple components is the amount of styles contained within one file. I normally like to start styling components in the same file however if there is too much bloat I generally break them out into a separate 'styles folder', this helps to keep your components lean. You can then simply export them from the separate file and use the wrapper here.
Use Themes & Global Styles Below you see an example of how you can configure a custom theme. By defining a theme you can then use these styles in other components via props. You can also define global top level styles for modifications to the body using the createGlobalStyle.
See What Others Are Doing As a developer it's good to see common practices and approaches to problems, in terms of styling there is a useful section of the styled-components website that shows projects and UI elements that have been built using the library. It contains simple components from Modals to fully fledged applications, great if your looking for new inspiration solutions to problems.
URL: Built with styled components
Conclusion
I have been using styled components for a long time and can 100% recommend them as my go-to library when it comes to styling applications. Props, themes, global styles, the community and the same syntax as CSS along with so much more.
I hope you found this post useful and a step in the right direction to try styled-components out in your next project. Thanks for reading!
Click Here for more regular useful guides on front end development.