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

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

import styled from 'styled-components';

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;

---

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

const RedDiv = styled.div ``

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

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;

---

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;

---

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;

---

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