When writing a project in React, there are many ways to style our react components.
- Define styles in CSS files.
- Define styles using preprocessors like SASS.
- Use inline styles.
- Use css-in-js
Styled-components come under 'css-in-js'. It basically is a way to conveniently manage our styles by writing them inside the Javascript file itself. As the official styled-components documentation says, styled-components is the result of wondering how we could enhance CSS for styling React component systems.

First of all we need to install the library using npm
or yarn
npm i --save styled-components
yarn add styled-components
Then we need to import it inside the required file.
import styled from 'styled-components';
The syntax for styled-components is something like the following.
const MyDiv = styled.div`
border: 1px solid red;
fontSize: 16px;
`
return (
<MyDiv>Hello there</MyDiv>
)
You can see how 'MyDiv' styles are defined inside the backticks in the above code block. This method is required when writing styles. We have defined the MyDiv to be a div element with the mentioned border and the font-size. Also notice the camel-case used for the attribute names inside the style definition.
This play a very important role in simplifying the way how we write styles for react components. It makes the components easily reusable and scalable.
Why styled-components?
There are many reasons why developers tend to use styled-components over traditional styling methods.
- Automatic critical CSS - Keeping track of which components are being rendered on screen and injects only those styles.
- No class name bugs - As unique class names are generated for the components, no duplication, overlap or misspellings.
- Easier deletion of CSS - No need to stress upon garbage css as when a component is deleted, the styles can also get deleted along.
- Simple dynamic styling - Styles can be matched based on a global theme or passed props.
- Painless maintenance - No need to hunt across different files to find the styling affecting a particular component as all the styles are in itself.
- Automatic vendor prefixing - Styled-components add the vendor prefixes, we only need to write standard CSS.
Using SCSS Features/Syntax with styled-components
We can also write styles using scss along with styled-components.
1) Media queries
const MyDiv = styled.div`
border: 1px solid red;
fontSize: 16px;
@media (max-width: 1000px) {
background-color: red;
}
`
2) Nesting styles
const MyDiv = styled.div`
border: 1px solid red;
fontSize: 16px;
img {
width: 120px;
height: 100px;
}
`
3) Pseudo classes
const MyDiv = styled.div`
border: 1px solid red;
fontSize: 16px;
&:hover {
background: yellow
}
`
4) Pseudo elements
const MyDiv = styled.div`
border: 1px solid red;
fontSize: 16px;
&:after {
content: '';
border: 1px solid blue;
}
`
Conditional Styling with props
We can define props in the styled-component and render the styles conditionally. This allows us to have dynamic styling inside our application.
const Label = styled.div`
background: #000;
color: ${(props) => (props.primary ? "#fff" : "#ccc")};
`;
return (
<Label primary>First name</Label>
)
Using Global Themes
We can globally define themes and use them in application styles. For that we need to import ThemeProvider
from styled components.
import React from "react";
import { ThemeProvider } from "styled-components";
Then we have to define a theme object which will be accepted by the ThemeProvider
.
const theme = {
colors: {
myred: "FF5733",
mygreen: "#20CE3F"
},
}
Then we have to provide the theme to the ThemeProvider
and export it
const Theme = ({ children }) => (
<ThemeProvider theme={theme}>{children}</ThemeProvider>
);
export default Theme
Then we have to wrap the components we need within <Theme>
tags and use the theme attributes in style definitions as below.
const Heading = styled.h1`
color: ${({ theme: { colors } }) => colors.mygreen};
`;
const App = () => {
return (
<Theme>
<Container>
<Heading>Hello World</Heading>
<h2>By the power of styled-components!</h2>
</Container>
</Theme>
);
};