How to customize a CSS library using pure Javascript in React

Even nowadays (in a mature React period), a lot of libraries don’t provide a good way to handle customizations.

React by itself brought a lot of innovations, and we’ll use the HoC concept to help us to solve this problem.

The use-case, the solution

Our customer simply wants to remove the input border and add some transition effect to airbnb/react-dates without generating a CSS file.

We’ll start by creating an Higher-Order Component to encapsulate our UX/UI customizations and the library utilization too.

Now, we must choose another library that allows us to override the default react-dates styles. If you don’t use any yet, we recommend you to take a look at styled-components and glamor.

Using styled-components

Using glamor

Final thoughts

This is a really simple and very powerful technique, making it possible for all libraries to fit in your project layout without much effort.