Media Query crashing app

[shilpan]

My code is as follows:

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

const styles = {
    'base': {
        '@media (min-width: 320px)': {
            marginLeft: 700
        },
        'marginTop': 100,
        'marginLeft': 500,
    },
    'test': {
        'color': '#123423',
        ':hover': {
          backgroundColor: 'red'
        }
    }
};

class App extends Component {
    render() {
        return (
            <div>
                <p style={[
                        styles.base,
                        styles.test
                    ]}>hi</p>
            </div>
        );
    }
}

export default Radium({isRoot: true})(App);

[ianobermiller]

I assume you are referring to this error?

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

You need to wrap your app in <StyleRoot>. See the docs at https://github.com/FormidableLabs/radium/tree/master/docs/api#styleroot-component.