React - how to use pseudo-selectors with Radium
Tags: react, javascript, radium, css
Published: 2020-06-30 21:20:47

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:

```javascript

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](https://formidable.com/blog/2019/radium-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](https://formidable.com/open-source/radium/).

*Image source: Tranmautritam/ @tranmautritam on Pexels*