Radium - Error: please wrap your application in the StyleRoot component

Question

I have a simple React component that I would like to add media queries to:

import React, {Component} from 'react';
import Radium, {StyleRoot} from 'radium';

import styles from '../../core/styles/base.css';
import sliderstyles from './Slider.styles.css';

class Slider extends Component {
    constructor(props) {
        super(props);

    }

    render() {

        let styles = {
            slider: {
                '@media (max-width: 1024px)': {
                    display: 'none'
                }
            }
        }

        return(
            <StyleRoot>
                <form ref="form" className={sliderstyles.ttSlider} style={styles.slider}>
                    <input max="480" min="30" name="slider" onChange={this.handleSlider} ref="seconds" type="range" value={this.props.totalSeconds}/>
                </form>
            </StyleRoot>
        )
    }
}

export default Radium(Slider);

However, when compiling this I get the following error:

Uncaught Error: To use plugins requiring addCSS (e.g. keyframes, media queries), please wrap your application in the StyleRoot component. Component name: Slider.

I'm using react 15.0.0 and radium 0.18.1

What am I doing wrong?

Answer 1

You cannot use media queries directly under <StyleRoot>, you will have to put the contents of <StyleRoot> on a separate component.

// COUNTEREXAMPLE, DOES NOT WORK
<StyleRoot>
  <div style={{'@media print': {color: 'black'}}} />
</StyleRoot>

This will work:

class BodyText extends React.Component {
  render() {
    return <div style={{'@media print': {color: 'black'}}} />;
  }
}

class App extends React.Component {
  render() {
    return (
      <StyleRoot>
        <BodyText>...</BodyText>
      </StyleRoot>
    );
  }
}

Answer 2

You have to wrap your whole app with "StyleRoot", not your component "Slider":

import React, { Component } from 'react';
import Radium, { StyleRoot } from 'radium';
import Slider from './Slider/Slider';

class App extends Component {
  // ...
  render() {
    // ...
    return (
      <StyleRoot>
        ...
        <Slider ... />
        ...
      </StyleRoot>
    );
  }
}

export default Radium(App);

This way, it should work.