.svg)
.webp)
Styled Components is a CSS in JavaScript solution, which basically aims to overcome limitations of CSS, such as the lack of dynamic functionality or scoping. This library seems to be a perfect fit, especially for React application. In this article, I would like to focus on the introduction for Styled Components, so without further ado, let’s get the obligatory installation section out of the way.
After getting Styled Components package:
npm install --save styled-components
And adding just one import:
import styled from 'styled-components
You’re ready to go.
Getting started with Styled Components
First, we are going to look at the syntax. It tends to be the most intimidating and, at the same time, the most distinctive aspect of the library.
Styled Components use Template Literals (template string) a feature implemented in ES6. By now, it is very popular and probably requires no further introduction - this syntax (template string backticks) should look familiar:
const Box = styled.div`
padding: 20px;
margin: 0 40px;
background: pink;
border: none;
border-radius: 4px;
`;
Using Template Literals we can easily define styles - just like in regular CSS file. However, Styled Components uses also Tagged Templates, which are a more advanced form of template literals. They allow to parse template strings with a function that can return string values (not only string values actually, but it is not really important in regards to Styled Components).
const Box = styled.div`
padding: 20px;
margin: 0 40px;
background: pink;
border: none;
border-radius: 4px;
${props => props.primary && css`
background: orchid;
`}
`;
And here’s how easy it is to use our new component:
<Box primary />
<Box />
So how it is working? Basically, the process of generating Styled Components could be divided into three steps:
1. Class with a unique name (automatically generated by the library) is assigned to the component:
2. CSS stylesheet is assigned to <head>:
3. Finally, a component is rendered
Why you should use Styled Components?
Ok, but what are the advantages of Styled Components? Let’s look closely at most important ones:
- Reusability - Styled Components is very easy to reuse. No need to come up with different names (something that can be a challenge in BEM approach for example). Especially in the larger project it is not hard to imagine a situation where you are going to need something like this:
const Button = styled.button`
background-color: white;
border: 1px solid orchid;
Border-radius: 4px;
font-size: 3rem;
`
It is a very good way for making sure styles in the whole project remain consistent (btw Styled Components supports almost all html tags - here’s the list).
- Scoped styles - when working with CSS there is often an issue with global scope - changing a value in one place, can result in unexpected behaviour in the other. Styled Components is a solution to this issue, because of scoped styles. No need to worry about changing styles and “breaking” something elsewhere in the app.
- Dynamic CSS - using passed props into Styled Component, we can dynamically determine styles for it, let’s look for the earlier example:
const Container = styled.div`
padding: 20px;
margin: 0 40px;
background: pink;
border: none;
border-radius: 4px;
${props => props.primary && css`
background: orchid;
`}
`;
<Box primary />
<Box />
No need for stylesheets - CSS in JS (self explanatory)
More advanced configuration
While working with Styled Components you will often encounter an issue with writing a new component every time when you need to add only a small CSS property (i.e. margin). This can be annoying especially on more complex views. Styled System comes to the rescue - I have found this approach complementary with Styled Components.
Styled System allows to define variables that are available within the project and then add groups of utilities (i.e “space” which contains margins and paddings) to components. By doing that, you can achieve bigger cohesion in the project.
Here’s an example of a highly flexible, reusable container with Styled System library:
import React from 'react';
import styled, { css } from 'styled-components';
import {
color,
layout,
shadow,
space,
} from 'styled-system';
const BoxStyled = styled.div`
${color}
${layout}
${shadow}
${space}
`;
const Box = props => (
<BoxStyled {...props} />
);
Usage:
<Box marginLeft={2} /> //adding margin via “space” utility
You can find more information about api here.
Disadvantages of Styled Components
- As it was mentioned at the beginning, one of the biggest challenges with working with Styled Components is, arguably, a syntax. However, I think the most important thing to wrap your head around is a way of thinking about components inside your project. How to apply styles needs to change if you want to use Styled Components, because of scoped styles for example. There is for sure a lot of consideration that goes into designing app this way, especially at the beginning of the project.
- While researching for this article, I have found many concerns for longevity of this library - as of 2019 it looks as being well established and widely used, but I’m just putting it out there.
- What makes for big advantage could also be a slight issue - because styles are defined per component, therefore scoped styles often demands creating multiple similar components (we’ll talk about a possible solution in the minute).
- When it comes to performance, CSS is still the faster approach than Styled Components however, there are some improvements in that regard, currently being as fast as inline styles.
Summary
I’m looking forward to working more with Styled Components, despite some learning curve I find this approach intuitive and effective, especially while working in React. I strongly recommend considering using Styled Components in your next project as well as considering Styled System library.
Please note, that this article is meant to be an overview, just an introduction to Styled Components. However, if you are interested in more “under the hood” breakdown, I highly recommend this article.
Want to learn more insightful tips about React? Read about our Test-driven development approach! And if you would like to raise your skills within a great JS team - check our job offers!
Navigate the changing IT landscape
Some highlighted content that we want to draw attention to to link to our other resources. It usually contains a link .
.svg)
.svg)
