Global variables using Styled Components

Step 1: Set files

Step 2: Set App file

Step 3: Set GlobalStyled

  • Import createGlobalStyles from Styled Components to set your variables;
  • Define some variables that you will use in your project. Here, I set a primary color, a default margin border, and the white color;
  • Create a .text class and apply a variable primary on color;
  • Create .btn class and apply primary variable on background-color and white variable on color atribute;

Step 4: Import GlobalStyles file on your App




Software Engineer who loves frontend.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

CPaaS Use Case: Hotline Call Between App and Phone

Quick start: ASP.Net Core 3.1 EF Core CQRS React JS Series part 13: HttpPut and HttpDelete requests

All of our apps explained + freebies

Webflow + ethers.js: Hackathon dApps just got a whole lot easier

Tips to game making with Phaser3 and NPM

Intercomponental Design

The simplest implementation of Context API in React Native

Communication Errors (browser and server)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Andre Cantarino

Andre Cantarino

Software Engineer who loves frontend.

More from Medium

React Hooks — Creating Custom Hooks

Eager loading in React

[React] Configuring Vite on a React project with Jest

Higher-Order Component (HOC)