5.06 Using Radium For Media Queries

Person.js

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

const person = (props) => {
  const style = {
    "@media (min-width: 500px)": {
      width: "450px",
    },
  };
  return (
    <div className="Person" style={style}>
      <p onClick={props.click}>
        I'm {props.name} and I am {props.age} years old!
      </p>
      <p>{props.children}</p>
      <input type="text" onChange={props.changed} value={props.name} />
    </div>
  );
};

export default Radium(person);

This is a component made available by Radium and whilst wrapping the export with Radium is enough for its pseudo selectors, for basically transforming selectors like media queries or other animations with keyframes, we need to wrap the entire application in a special component provided by Radium.

App.js

import color from "color";
import Radium, { StyleRoot } from "radium";
import React, { Component } from "react";
import "./App.css";
import Person from "./Person/Person";

    ...

    return (
      <StyleRoot>
        <div className="App">
          <h1>Hi, I'm a React app!</h1>
          <p className={classes.join(" ")}>This is really working!</p>
          <button style={style} onClick={this.togglePersonsHandler}>
            Toggle Persons
          </button>
          {persons}
        </div>
      </StyleRoot>
    );
  }
}

export default Radium(App);