Global variables using Styled Components

I started a course in Udemy named React Styled Components by John Smilga. The content is very objective and straightforward, and I recommend.

In one of the classes, I learned something interesting about using CSS global variables using Styled Components.

First, we will imagine that we have a React application set on src/App.js and Styled Component library installed.

Step 1: Set files

Create a global-styles.js file to set all CSS global variables that you will use in your project.

— scr
— — App.js
— — global-styles.js

Step 2: Set App file

Create a simple App file with a text and button. I set a btn class for the button, but it doesn't have attributes initially.

It should look like this:

Step 3: Set GlobalStyled

On global-styles.js you need:

• 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

Now, you need to apply your CSS variables to your App. You have to import global-styles file and put the reference like a component inside your App function.

The result will look like this:

Very simple, right? Feel free to improve this code.

Bye ;)