How to color entire page using Global Styled Components | React | Styled Components

 

Styled Components library is the best for styling our react apps!

To use it 

1.) Install Styled Components

npm install styled-components --save

2.) import it 

import styled from "styled-components";

The Styled Components library is all about styling individual components.

For example,

Set a font-family for all your typography

Set the background color on every page

Override some browser default styling....etc

In this post, I’ll dive into exactly how you can achieve this with the createGlobalStyle function.

import React from "react";

import styled, { createGlobalStyle } from "styled-components";

const Global = createGlobalStyle`

body{

    background-color: red;

    align-items: center;

    color:black;

    text-align: center;

}

`;

const Button = styled.button`

  color: purple;

  background-color: yellow;

`;

function StyleCompnorm() {

  return (

    <div>

      <Global />

      <h1>Global Style Component</h1>

      <Button>Change background</Button>

    </div>

  );

}

export default StyleCompnorm;

Just make sure that your Global Component is kept above your main code!!

Output :