#styled-components - #JavaScript #ES6 to write #CSS for #Reactjs and #ReactNative components


Styled-components is a way to write CSS - Cascading Style Sheets using JavaScript ES6 for Reactjs and React Native components.

Styled-components homepage

How to install

npm install --save styled-components

Or including the following script in your html file
<script src="https://unpkg.com/styled-components/dist/styled-components.min.js"></script>

4 Benefits of using styled-components 

These are the benefits that I have realized after starting using styled-components.
1) CSS reuse
You can save a set of CSS as a variable and reuse it. For example, I styled <a> tag and able to reuse it in a React template or extend the style for a component.

Styling an <a> tag

import { green, themeColor } from ‘./colors';
import styled from 'styled-components';

export const UnderlineA = styled.a`
  cursor: pointer;
  text-decoration: none;
  color: ${themeColor};
  span {
    position: relative;
    display: inline-block;
    i {
      padding: 0 5px;
  span:after {
    position: absolute;
    content: "";
    height: 2px;
    width: 100%;
    bottom: -5px;
    left: 0;
    background: ${green};
    // transform-origin: 0%;
    transform: scaleX(0);
    transition: transform 0.3s ease-out;
   &:hover {
      span:after {
        transform: scaleX(1);
        transition: transform 0.3s ease-out;   
      i {
        color: ${green}

Using UnderlineA in CSS file of another component to extend the style

export const ContactURL = styled(UnderlineA)`
  font-size: 1.3em;
    font-size: 1.1em;

2) Simplify reusing of media query
You can have another media variable for min-width as well.

import { css } from 'styled-components';

const sizes = {
  phone: 376,
  tablet: 768,
  desktop: 992,
  larger: 1170

export const media = Object.keys(sizes).reduce((accumulator, label) => {
  const emSize = sizes[label] / 16
  accumulator[label] = (...args) => css`
    @media (max-width: ${emSize}em) {
  return accumulator
}, {})

You can then use it as so

export const SpecialContact = styled(contact)`
  color: red
    color: tomato

export const Container = styled(Div)`
  margin-top: 10vh;
  padding-left: 60px;
  padding-right: 60px;
    margin-top: 7vh;  
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 7vh;  
    padding-left: 10px;
    padding-right: 10px;

3)You can use component props to toggle CSS

Example 1: using props to toggle CSS

render() {
  return (

export const NetworkContainer = styled(Flex)`
  transition: color .3s;
  i {
    text-align: center
  div {
   display: inline-block;
   padding-left: 7px;
   padding-right: 7px;
  ${({doBounce}) => doBounce && css`
    div {
      animation: ${bounce} 1.4s ease-out 0.7s;

Example 2:  using props to set CSS value
render() {
  return (
      show={this.props.show? 1 : 0}
      translate={this.props.show? '-20%' : '20%'}
      onClick={() => this.scrollToTop()}>
      <FontAwButton class={'fa fa-angle-double-up'}/>

export const ScrollUpButtonContainer = styled.div`
  opacity: ${({show}) => show || 0};
  transform: ${({translate}) => `translateY(${translate})`};
  transition: transform 0.5s ease-in-out, opacity 0.5s ease;

height: ${({shrink}) => shrink ? `2.7em` : `3em`};
${({shrink}) => shrink ? css`flex-shrink: ${shrink};`: null}

4) You can theme your application.

This is taken from their example as I haven't used theming yet.
Define your theme colors
// colors.js

const colors = {
  main:  '#393276',
  dark:  '#0D083B',
  light: '#837EB1'

export default colors

Apply your theme with ThemeProvider
import { ThemeProvider } from 'styled-components';
import colors from './colors' // from Step #1

const App = props =>
  <ThemeProvider theme={colors}>

Create an importable theme object using styled-components-theme
// theme.js

import createTheme from 'styled-components-theme';
import colors from './colors' // from Step #1

const theme = createTheme(...Object.keys(colors))
export default theme

Use the theme colors in your components

import styled from 'styled-components'
import theme from './theme' // from Step #3

const Header = styled.div`
  background: ${theme.dark};
  color: ${theme.light};

const Button = styled.button`
  background-image: linear-gradient(${theme.light}, ${theme.light.darken(0.3));
  color: ${theme.dark};
  padding: 10px;

Check out styled-component documentation.
You can also check out their tips on how to use styled-components more efficiently.

Thanks for reading!