5.05 Adding And Using Radium

Using radium is one way of getting the best of both worlds scoped styles and advance CSS features like pseudos selectors and media queries.

Install Radium

Source: npmjs.com: Radium

npm

npm install --save radium

Yarn

yarn add radium

If error:

 Found: react@17.0.2
npm ERR! node_modules/react
npm ERR!   react@"^17.0.1" from the root project
...

Then (read more: stackoverflow.com: Error When Trying To Install React Redux Dependency):

npm install --legacy-peer-deps

Using Radium

App.js

import color from "color";
import Radium from "radium";
import React, { Component } from "react";
import "./App.css";
import Person from "./Person/Person";
    ...
  render() {
    const style = {
      backgroundColor: "green",
      color: "white",
      font: "inherit",
      border: "1px solid blue",
      padding: "8px",
      cursor: "pointer",
      ":hover": {
        backgroundColor: color("green").lighten(0.75),
        color: "black",
      },
    };

    let persons = null;

    if (this.state.showPersons) {
      persons = (
        <div>
          {this.state.persons.map((person, index) => {
            return (
              <Person
                click={() => this.deletePersonHandler(index)}
                name={person.name}
                age={person.age}
                key={person.id}
                changed={(event) => this.nameChangedHandler(event, person.id)}
              />
            );
          })}
        </div>
      );

      style.backgroundColor = "red";
      style[":hover"] = {
        backgroundColor: color("red").lighten(0.5),
        color: "black",
      };
    }

    const classes = [];
    if (this.state.persons.length <= 2) {
      classes.push("red"); // classes = ['red']
    }
    if (this.state.persons.length <= 1) {
      classes.push("bold"); // classes = ['red', 'bold']
    }
    ...

You have the normal CSS pseudo selectors you can add, and you still have scoped styles which you can easily edit from within your JavaScript code.

Now Radium doesn't limit you to using pseudo selectors as we did, you can also add media queries.