A simple global styling method with styled component.

Using Styled-components, I have tried several ways to apply global styling & media queries to my React App. I'm here to share my preferred method this far (until I find another better way, of course!).

(For this article, I am using React version 17.0.2, and styled component version 5.3.3) Here it is, in step by step format:

Step 01.

• Install styled components

yarn add styled-components //or npm install styled-components 

Step 02.

• Inside the src folder: create a file, and call it globalStyle.js
• Here is a screenshot of my folder structure

• Inside globalStyle.js, add these codes:

import { css } from "styled-components"; // Create global color export const ctaColor = () => { return css` palevioletred `; }; // Create media queries export const mobile = (props) => { return css` @media (min-width: 576px) { ${props} } `; }; 

- as you can see, we are simply creating functions that return CSS for us

Step 03.

• To use these "CSS-functions" in our components: just import it, then apply it to our styling.

• It works just like the usual JavaScript functions.

• Refer to the codes below for some examples:
  

import styled from "styled-components"; import { mobile, ctaColor } from "../../globalStyle"; const Navbar = styled.div` display: flex; flex-direction: column; align-items: center; background: ${ctaColor}; ${mobile({ flexDirection: "row" })}` 

Voila!

That is it, short and simple. I hope it is useful for your projects.

Cheers,

Your friend,
Marizoo