¿Cómo usar la aplicación Radium in React para diseñar en línea?

Radium es un paquete npm popular para React que nos permite usar estilos en línea con pseudoselectores y consultas de medios. Sin este paquete de terceros, uno no puede hacer estilo en línea con pseudoselectores porque React no nos permite usar pseudoselectores en estilo en línea. 

Ejemplos de pseudoselectores: hover, visited, link, etc.

Pasos para agregar y usar RADIUM en la aplicación de reacción: Este es un ejemplo de diseño de un botón que tiene un efecto de desplazamiento (pseudoselector).

Paso 1: Cree una nueva carpeta para el proyecto.

Paso 2: ahora en su terminal, ejecute el siguiente comando desde la raíz de la carpeta de su proyecto para instalar create-react-app y guardarlo globalmente.

$ npm install create-react-app -g

Paso 3: ahora cree una aplicación de reacción de muestra usando el comando en su terminal. Nómbralo mi-aplicación..

$ create-react-app my-app

Paso 4: puede ver su aplicación de reacción de muestra ejecutándose (http://localhost:3000/) usando el comando en su terminal desde la raíz de my-app.

$ npm start

Paso 4: Ahora ve al archivo app.js en tu editor y edítalo, para que devuelva un simple botón.

Paso 5: Ahora instale REDIUM desde la raíz de su aplicación usando el comando.

$ npm install --save radium

Paso 6: importa RADIUM en tu archivo app.js antes de usarlo.

Paso 7: edite la aplicación, js.

import Radium from 'radium';
import React from 'react';
  
function App() {
  const style={
    ':hover':{
      backgroundColor: 'green'
    }
  }
  return (
    <div>
      <h3>Now you can see hover is working in inline styling</h3>
    <button style={style}>example of radium</button>
    </div>
  );
}
  
export default Radium(App);

Paso 8: El formato es el mismo para otros pseudoselectores también.

Paso 9: ahora ejecute su aplicación nuevamente usando el comando.

$ npm start

Salida: ahora, puede ver que nuestro botón tiene un efecto de desplazamiento agregado.