React - how to use pseudo-selectors with Radium

If you're a fan of using inline styling and you find it difficult to deal with things like pseudo-selectors or media queries in React, one of the solutions for you could be Radium.

As specified on their website, Radium is a set of tools that help you manage inline styles on React elements. There are some features which this type of styling has issues accommodating (modifiers, pseudo selectors or media queries) and Radium is here to fix just that. Let's see some code to understand how it's used:

import React from "react";
import "./styles.css";
import Radium from "radium";

function App() {
  const divStyle = {
    height: "100px",
    width: "100px",
    backgroundColor: "tomato",
    ":hover": {
      backgroundColor: "green"
    }
  };

  const inputStyle = {
    display: "block",
    ":focus": {
      backgroundColor: "yellow"
    }
  };

  return (
    <div>
      <div style={divStyle} />
      <input key={0} />
      <input key={1} style={inputStyle} />
    </div>
  );
}

export default Radium(App);

So, first things first, we need to install Radium. We can do this by running:

yarn add radium
# or
npm install --save radium

Then we need to import it in our React file like so:

import Radium from "radium";

In order to use any the feature offered by it, we need to wrap our component into a HOC (higher order component):

export default Radium(App);

And from then on, everything is pretty straight forward. Notice we have a constant called divStyles which holds one object and inside we define our styles. The only strange looking property might be:

":hover": {
      backgroundColor: "green"
    }

This is how we define styles using Radium. We put the pseudo-selector in quotes and we create a new object that holds the styling for that particular selector.

We then pass the variable into the style property of the component we wish to style and all styles inside the object (including the Radium ones) are to take effect immediately.

If you have multiple interactive elements and you want to apply style to them, you must provide them with a unique key, so Radium knows exactly which one we want to target. In the example bellow I have another constant called inputStyle and because I have multiple input fields and one of them is using inputStyle, I am providing unique keys to the one that I want styled (since the first input is not styled, it doesn't need a key).

<input />
<input key={0} style={inputStyle} />

Although it has some advantages, I'm not a fan of inline styling because I believe it makes the code less readable. But I can see why this method of working with pseudo-selectors might come in handy when you need a quick and easy fix (especially when testing things). Be careful though, Radium is now under stable maintenance so this means no new features will be implemented and even the creators are recommending using alternative tools for achieving the same effects.

You can read more about the project here.

Image source: Tranmautritam/ @tranmautritam on Pexels