DEV Community

David Chedrick
David Chedrick

Posted on • Updated on

Using Styled Components in React

Overview
Today we are going to work with some CSS and make custom styled components for our React project. So we are going to assume you already have your React app set up and running and you are ready to start making it super pretty.

What is Styled-Components:
Styled Components is a CSS-in-JavaScript tool you can use in React to write and manage your CSS.
You get to keep everything organized by writing your CSS into your component so you do not have to create another .css file.

Styled-Components makes it very easy to find and edit your CSS code. No more having to scroll through a long style sheet to find the code you need to edit.

You can style your entire project with Styled Components or you can use it along side libraries like Bootstrap or Material UI. I personally enjoy combining Styled Components with Bootstrap and React Bootstrap.

Installing styled-components:
To use styled-components you first need to install it into your project:

# with npm
npm install --save styled-components

# with yarn
yarn add styled-components
Enter fullscreen mode Exit fullscreen mode

At the top every file where you use styled-components, you will need to add this import:

import styled from 'styled-components';
Enter fullscreen mode Exit fullscreen mode

This Example will have a very basic set up.
Two divs, one unstyled and one styled.

import styled from 'styled-components';

function App(){
    return(
      <>
        <div>
          Unstyled Div
        </div>
        <div>
          Styled Div
        </div>
      </>
    )
  }

  export default App;
Enter fullscreen mode Exit fullscreen mode

Page with no style


This is the basic syntax to set up your Styled Component.

const RedDiv = styled.div ``
Enter fullscreen mode Exit fullscreen mode

Lets take a deeper look into that line:

  • First declare the name with a const.
    I chose the name RedDiv, but you can choose whatever
    name you like. Keep it simple and to the point so it is
    understandable and reusable.

  • The _styled _ gives us access to the styled-components functionality.

  • The .div after styled anchors the HTML element div.
    When declaring a Styled Component, any HTML element can be
    used: div, h1, a, section, span, etc...

The actual styling goes between the two back ticks and is written just like CSS syntax. Let's make the font red.

const RedDiv = styled.div `
    color: red;
  `
Enter fullscreen mode Exit fullscreen mode

The next step is to change the name of whichever div you want styled. Here we are going to change the name of our second div to RedDiv.

import styled from 'styled-components';

function App(){
    return(
      <>
        <div>
          Unstyled Div
        </div>
        <RedDiv>
          Styled Div
        </RedDiv>
      </>
    )
  }

const RedDiv = styled.div `
    color: red;
  `

 export default App;

Enter fullscreen mode Exit fullscreen mode

One unstyled, one red


The styled component is reusable so let's add a second RedDiv.

import styled from 'styled-components';

function App(){
    return(
      <>
        <div>
          Unstyled Div
        </div>
        <RedDiv>
          Styled Div
        </RedDiv>
        <RedDiv>
          Second Styled Div
        </RedDiv>
      </>
    )
  }

const RedDiv = styled.div `
    color: red;
  `
export default App;

Enter fullscreen mode Exit fullscreen mode

One unstyled, two red


We can set up even more styled components.
Let's create a third styled component but make it blue, bold, and italic instead of red.

import styled from 'styled-components';

function App(){
    return(
      <>
        <div>
          Unstyled Div
        </div>
        <RedDiv>
          Styled Div
        </RedDiv>
        <RedDiv>
          Second Styled Div
        </RedDiv>
        <BlueDiv>
          Third Styled Div
        </BlueDiv>
      </>
    )
  }

const RedDiv = styled.div `
    color: red;
  `

const BlueDiv = styled.div `
    color: blue;
    font-weight: bold;
    font-style: italic;
  `

export default App;

Enter fullscreen mode Exit fullscreen mode

One unstyled, two red, one blue


References:
Read the official documentation for more advanced topics:
https://styled-components.com/docs

Top comments (0)