Styling React App using Styled-Componenets

Yes, you’re seeing nail-paint :D

Objective

There are very few libraries available for styling in react and I have found one amazing and after looking at features they provide, you’ll also use it in your next project.
It’s styled-components and they have very neat documentation for each feature they provide.
Hence, main objective of this blog is how to style components using styled-components and how you can achieve almost everything with it.

Setup

Let’s start with creating React JS App and how we can structure code inside our application.

npm install -g create-react-app

This will install create-react-app globally in your system and it can be used for version of npm 5.1 or earlier then run following command.

For More Information : documentation

create-react-app react-styling
Go to the folder created by it. For this we have used app name react-styling hence,

cd react-styling
Following command will run the app in development mode.
npm start
This will start the application in your browser. You can edit App.js and see changes in browser.

Styling

Now, Let’s go straight for styling part which is the motive of this blog.
npm i styled-components — save

Now, we have dependency added to our application and use it.

In App.js, there is classes as App, App-Header,App-logo, App-title, App-intro.
We will try to do the same thing which these classes are doing using styled-components.

For that, import added library in App.js
import styled from ‘styled-components’;
We have text-align property for App class which will be as follow using styled & remove div with className replace it with <AppWrapper>

const AppWrapper = styled.div`
   text-align: center;
`; //Which will provide css to div inside AppWrapper

Nothing will change on screen as we have just copied same css but yes, we did it using styled-components.
Now, Let’s add css for all the remaining classes and remove the App.css which will not cause anything at all as we have covered it using styled-components.
So, Our final App.js will look like this

import React, { Component } from ‘react’;
import styled from ‘styled-components’
import logo from ‘./logo.svg’;
const AppWrapper = styled.div`
  text-align: center;
`
const AppLogo = styled.img`
  animation: App-logo-spin infinite 20s linear;
  height: 80px;
`
const AppHeader = styled.div`
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
`
const AppTitle = styled.h1`
  font-size: 1.3em;
`
const AppIntro = styled.p`
  font-size: large;
`
class App extends Component {
  render() {
    return (
      <AppWrapper>
        <AppHeader>
          <AppLogo src={logo} className=”App-logo” alt=”logo” />
          <AppTitle className=”App-title”>Welcome to React!!
          /AppTitle>
       </AppHeader>
       <AppIntro>
          To get started, edit <code>src/App.js</code> and save to       reload.
       </AppIntro>
    </AppWrapper>
   );
  }
}
export default App;

Global CSS

Now, comes the part what to do when we want some css throughout the application & Solution is injectGlobal.
We can create common.js inside work directory and add injectGlobal and add css for common modules. Right now, we have style for body inside index.css which we’ll convert in common.js

import { injectGlobal } from ‘styled-components’
injectGlobal`
  body {
    padding: 0;
    margin: 0;
    font-family: sans-serif;
  }
`

Now, we do not require index.css file as well & put css for common modules inside it.
You can manage color codes for buttons, image styling and so much in common without typing much code.

Theme

Lets go through what their official documents say

styled-components has full theming support by exporting a <ThemeProvider> wrapper component. This component provides a theme to all React components underneath itself via the context API. In the render tree all styled-components will have access to the provided theme, even when they are multiple levels deep.

Let’s go through the example.
Let create color theme for Header now which will change background color of header we have.
we’ll create one const with color code in our common.js

export const theme = {
   headerColor: ‘#B8B5B7’ //Choose any color
}

Now, we can use this anywhere using props & also don’t forget to wrap application with <ThemeProvider theme={theme}>

Now, you can use the headerColor with props in app.js header css

const AppHeader = styled.div`
  background-color: #222;
  height: 150px;
  padding: 20px;
  background-color: ${props => props.theme.headerColor};
`

And, your header background will be light gray. Using some actions you can change application level theme in very easy way.

You can also get theme without styled-components. Wow!! How ???
Using withTheme higher order component, which you can bind to your component as (Here Login is class-based component)
export default withTheme(Login);

Let’s do more on theming as we really need Day-Night theme in real-world application. We’ll create two themes and use it.

Day-Night Theme Integration

As earlier, we’ll make two themes and assign color codes accordingly. I have changed header background color, app title which is header title font color and button background color.
In app.js, create two buttons and name it as Day Theme & Night Theme and on click that changes it’s state for it.

Now comes the main part how we’ll use the Day or Night theme colors.

//styled components code in common.js
export const nightTheme = {
  primary: ‘#707B7E’,
  secondary: ‘#01c1d6’,
  headerColor: ‘#071215’,
  fontColor: ‘#FAFCFC’
}
export const dayTheme = {
  primary: ‘#e7e7e7’,
  secondary: ‘#ffb617’,
  headerColor: ‘#C3C7C8’,
  fontColor: ‘#010404’
}

Now, we’ll manage theme on state change on button click and will get color code accordingly using props.

// Code in App.js
const AppHeader = styled.div`
  background-color: #222;
  height: 150px;
  padding: 20px;
  background-color: ${props => props.theme.headerColor};
`
const AppTitle = styled.h1`
  font-size: 1.3em;
  color: ${props => props.theme.fontColor};
`

Here, using props.theme we’ll get colors according to theme which we have passed to ThemeProvider.
Bingo !! You have now theme implemented in your application.

Extending Styles

So many times situation comes as we have inputs or buttons with same properties but in one or two case it should look different and what happens is we end up writing same css again and again.

Yes, you’re right styled-components have solution for it.
By Extending existing css properties & overriding it or adding new to it.
Let’s see how it works using example.
I have created four buttons which should have some same properties & some of them might use different.

I have created another file for buttons, you can add in app.js and let’s do basic styling for Button and use different for other.

import React, { Component } from ‘react’;
import styled from ‘styled-components’;
const Button = styled.button`
  width: 10%;
  padding: 1em;
  margin: 0.5em;
  color: black;
  background: papayawhip;
  border: none;
  border-radius: 3px;
`;
const BuyNowBtn = styled(Button)`
  width: 15%;
  color: black;
  background: #2899F8;
  font-size: medium;
  font-weight: bold;
`;
const CartBtn = styled(Button)`
  background: #B1F97C;
  color: black;
  border-color: black;
`;
class Form extends Component {
  render() {
    return (
      <div>
         <Button >WishList </Button><br />
         <BuyNowBtn >Buy Now </BuyNowBtn><br />
         <Button >Share </Button><br />
         <CartBtn >Add To Cart </CartBtn>
      </div>
   )
  }
}
export default Form;

So, Here BuyNowBtn & CartBtn have extended properties of Button and we don’t have to re-write all the same lines again and again.
In real-world applications, this feature is very useful for navigation or forms components.
You can find code of this here : Github

Styled-components also supports animation, server-side rendering.
That’s long story.

If you find it helpful, please clap !!
I’d love to hear from all of you.