White-labeling React application with SASS and CSS variables

White-labeling is one of the more difficult problems in UI development. And for a reason. The good news is that with CSS variables, this task became much more manageable. And even better, they can also be used with SASS. In this post, you can see my solution for white-label support in a ReactJS application using CSS variables and SASS.

Make a design book

You don't need to go into huge details and get a professional designer to make it. But you need to put some proper structure. Define your paddings, margins, font sizes, and colors. If every part of your website has different padding, you can't customize it efficiently. There would be just too many variables.

Project setup

For this example, I am starting with a basic React application, and you can create it by executing:

npx create-react-app whitelabel-example-app

Also, install node-sass for SASS support by running the next command:

npm install node-sass

There was an issue with the latest version of the node-sass package(v5). You can fix this problem by downgrading to version four.

Initial styling

The first step is to rename the App.css file into App.scss. This change enables us to use SASS for styling. It would all work with CSS, but I want to show how CSS variables can work with SASS. After rename, you need to fix the import of that file in the App.js file. The last thing is deleting all styling in the SASS file and defining background color for the App class.

.App { 
  background: grey;
}

Create a SASS variable

We could improve the code above by creating a SASS variable for the background color. By doing that, it is easier to make changes.

$main-color: grey;

.App {
  background: $main-color;
}

Create CSS variables folder

Defining CSS variables doesn't work in the SASS file. But you can use them. So first, create a file called theme.css located in the public folder. To use it, you also need to update the index.html file and add the following code in the head section.

<link rel="stylesheet" type="text/css" href="theme.css" id="theme"/>

Now when we are using this file, we can define the CSS variables inside. You define CSS variable like any CSS rule but prepended by two dash signs. Also, it would be best to place it under the :root pseudo-selector.

:root {
  --main-color: grey;
}

Using variables

Now when we linked the CSS file, we can use a variable anywhere under the root. You do that by using the variable name in a var function as a rule value. With that update, file App.scss has the following code.

.App {
  background: var(--main-color);
}

Conclusion

What you can see in this example is one background controlled with one CSS variable. On the application of that scale, it may not make a big difference. On the more complex application, the improvement is noticeable. Instead of changing individual files around, all you need to do is replace top-level CSS containing all the variables. Like this, you can also have multiple themes. You can find code from this post in this Git repository.

For more, you can follow me on Twitter, LinkedIn, GitHub, or Instagram.