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

Styled-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;

  ${media.desktop`

    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) {

      ${css(...args)}

    }

  `

  return accumulator

}, {})

You can then use it as so

export const SpecialContact = styled(contact)`

  color: red

  ${media.desktop`

    color: tomato

  `}

`;

export const Container = styled(Div)`

  margin-top: 10vh;

  padding-left: 60px;

  padding-right: 60px;

  ${media.tablet`

    margin-top: 7vh;  

    padding-left: 20px;

    padding-right: 20px;

  `},

  ${media.phone`

    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 (

    <NetworkContainer

      row

      justify={'center'}

      align={'center'}

      doBounce={this.props.doBounce}

    >

      {this.renderContactList()}

    </NetworkContainer>

  );

}

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 (

    <ScrollUpButtonContainer

      show={this.props.show? 1 : 0}

      translate={this.props.show? '-20%' : '20%'}

      onClick={() => this.scrollToTop()}>

      <FontAwButton class={'fa fa-angle-double-up'}/>

    </ScrollUpButtonContainer>

  );

}

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`};
OR
${({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}>

    {props.children}

  </ThemeProvider>

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!

Jun