All about styled-components

styles-components is a CSS-in-JS library that helps you to write CSS in a component. Here in this post, I will cover more than basics you need to know.


You can write scoped CSS which means that CSS will apply only for that element in the component, with no spilling. You can still write Global CSS.


  • Automatics vendor prefixes
  • Unique class names, that means no class names bugs 😉
  • Removes unused styles
  • Adapting based on props
  • Supports SSR(Server Side Rendering) too


npm i styled-components

Getting Started

import styled from 'styled-components'; 
const Button = styled.button`
 font-size: 1.5rem;
 padding: 2em;
 //in React
 <Button>Click Me!</Button>
Button - props
const Button = styled.button`
   font-size: 1.5em; 
   padding: 2em;
   color: ${
    props => (props.primary ? 'blue' : 'black')
 // In react
 <Button primary>Click Me!</Button>
Extending Styles
const Button = styled.button`
   font-size: 1.5em;
   padding: 2em;
 // Extend the button
 const BlueButton - styled(Button)`
  color: blue;
To reuse the styles
export const Button = styled.button`
   font-size: 1.5em; 
   padding: 2em;
 // DEFINE & EXPORT, Re-use


A theme is a collection of all the things we use in an app like the colors, spacing, etc. It defines the design system of your app. It's easier to change.

Simple Theme

const theme = {
   color: {
   blue: "#1862fd";
   lightblue: "#f0f3ff"; 
    sizes: [16, 32, 64, 128, 256], 
    fontSizes: [12, 14. 16, 20, 24]
    // ... and mannnny thingsss

How to?

import {ThemeProvider} from 'styled-components'; 
const App = () => {
 return ( 
   <ThemeProvider theme={theme}>
    <Container />

How to use the theme?

const Button = styled.button`
 color: ${props =>};
 padding: ${props => props.theme.sizes[0]};
//Using the button


It helps in creating a style for your app. All the font particulars, colors. spacing and many things can be maintained in one file. You can create separate themes for one app.

Best (of styled-components)

  • as props
  • CSS prop
  • attrs
  • Global Styles
  • Server-Side Rendering

as prop

const Header = styled.h1``; 
 <Header as="h3">
   Hello World!

You can create any styled element and use as prop to styles as another element.

CSS prop

 css="padding: 1em;color: red;"

To style the component without creating another styled component.

To enable support for the CSS prop you have to use the Babel plugin.


const Input = styled.input.attrs(props => ({
 type: "password"
 // Create an input of type password
 <Input aria-hidden="true: />

To set the default or necessary attributes for the styled component.

Global styles

import { createGlobalStyle } from 'styled-component'; 
const GlobalStyle = createGlobalStyle`
  body { color: 'black'; }
<div className="App">
  <GlobalStyle /> 


import { isStyledComponent } from 'styled-component'; 
const Header = styled.h1``; 
let isStyled = isStyledComponent(Header);

A utility to help identify styled-components.

with styled-system

It is a library which gives a lot of utilities that will map the props to your theme. It also makes you Component Oriented styles easy.

with styled-system

import styled from 'styled-component'; 
import {space,color,position} from 'styled-component'; 
const Card = styled.div`
<Card p="2em" bg="red" />
<Card positon="absolute" top="0" left="0" />

Without styled-system

import styled from 'styled components'
const Card = styled.div`
  padding: ${props => props.padding};
  background: ${pops => props.background};
  color: ${props => props.color};
<Card padding="2em" background="red" />

Advantages of styled-system

  • It enables Rapid Development.
  • Re-use of components will be easy
  • It will props-driven development
  • CSS-in-JS
  • No extra tooling to build

😉 Thanks For Reading | Happy Styling 🥂

No Comments Yet