Starting styled mixins in React

Part-1: How to reuse CSS in JS

If you remember those good old days without CSS-in-JS libraries, you have probably tried some preprocessors similar to Less, Sass and suchlike. Basically, to prevent writing duplicate code over and over again, a smart solution was integrated into these libraries to solve this issue and that was Mixins. They are incredibly easy to define and super fun to use in any style. But since the widespread adoption of writing CSS rules inside JS files, especially in the case of Styled-Components, this handy feature has become a bit challenging to start with. The reason for this issue could be the fact that it is not a topic you would immediately discover in the official documentation.

In A Nutshell

Mixins are like capsules of code, grouped together for specific usage. These lines of code can be pretty simple or complex based on the project’s needs. A mixin is named according to its function and can be imported as many times as it is needed without repeating a single line of code. Whatsmore, you can benefit from React props and use them to dynamically respond to changes in the local or global state.

The Problem

Although it is one of the key features in Sass-like preprocessors, Mixins in Styled-Components are a bit tricky to start for freshers. since the exact syntax of this handy feature does not exist in such libraries. In this article, we will cover its basic and advanced usage in React, along with a tiny extra example for better understanding.

The Solution

There are different use approaches that achieve a similar result to Sass-mixins. To keep things clean and simple, here we introduce a basic string mixin, another one using CSS helper, and finally a more complex functional mixin. Sooner than you think, you will find yourself using the same structure repeatedly in your future projects.

It’s easy and fun, let’s dive in!

To Dear Builders:

Please take into consideration, this article was written with junior developers in mind, and it is generally intended for coders who have just started using styled-components in React. Naturally, for the sake of simplicity, all the examples are highly simplified. Furthermore, to get a general overview of what the library offers to us, enjoy reading this great tutorial from Louis Petrik.

Code Example:

Here is a simple code I was trying to develop. Clearly, there are repeated lines in both containers’ styles. So, it is a fantastic use case for mixins.

⚡⚡Code inside containers.js file.

Step-1: mix codes in a string

The simplest form of mixins is just a string. We can separate the repeating part and put it in a string using backticks. That’s it! Look at my code after creating myMixin.

⚡⚡Adding myMixin to our containers.

Much better, yeah? The limitation of this method is that it does not support syntax highlighting, and it is super challenging for applying dynamic props to the style.

Step-2: CSS-helper, a better development experience

This helper gives you a greater degree of freedom to dynamically style any component. It also gives you a much better experience while developing your code. I’m going to import and use CSS helper from styled-components package, which will enable me to write CSS syntax in any JS files. Here is my code improved with CSS helper.

⚡⚡Adding {css} from styled-components to myMixin.

A much-needed improvement for this code could be adding more flexibility to using props. And that’s exactly what CSS helper provides. Let’s take a look into a newer version of myMixin with props.

⚡⚡Adding dynamic styles to myMixin using props.

Now we have control over our code with dynamic styling. We just need to pass props to the component, Like the following example:

⚡⚡code inside my-component.js, a functional React component.

Step-3: JS functions as Mixins

Writing CSS in JS functions gives you better access to props and ES6 destructuring makes everything smoother. This method helps you define more options and will dramatically increase your peace of mind while developing your next project. This is the second revised version of myMixin.

⚡⚡Destructuring our props in myMixin.

Also, you can set the default values while destructuring like this:

⚡⚡Destructuring and setting default values in myMixin.

All In All,

We covered 3 different methods of using mixins in Styled-Components. These tools support a range of scenarios from basic to advanced projects. but certainly, there are some technical cases in which we need to piece together more moving parts.

In Part-2 of this article, We will cover nested mixins and will increase the complexity using arguments.

🎁 Code Repo

As always, you can find all the sample codes on my GitHub account and enjoy them for free. To contact me, simply visit Vegeloper.com

Resources:

Vegeloper, A Vegan Developer