Radium: Unsupported style property @media (min-width: 320px)

Created on 20 Jul 2017 · 2Comments · Source: FormidableLabs/radium

Hello,

I am learning the radium by performing the examples.
The one example I am trying currently is to use Media Queries, which is mentioned on http://formidable.com/open-source/radium/docs/guide#media-queries

var style = {
  width: '25%',

  '@media (min-width: 320px)': {
    width: '100%'
  }
};

I have created the React Component to test this and my code looks like

import React from "react";
import Radium from "radium";

var style = {

    width: "25%",
    color: "white",
    backgroundColor: "blue",

    '@media (min-width: 320px)': {
        width: '100%',
        backgroundColor: "orange"
    }
};

class LoginPage extends React.Component {
    render() {
        return (
                <LoginSidebar/>
        );
    }
}

const LoginSidebar = () => (
    <button style={style}>Login</button>
);
export default Radium(LoginPage);

When the page loads, I do not see the property being applied when I resize the screen. In the Develop Console, I see a warning as

proxyConsole.js:56 Warning: Unsupported style property @media (min-width: 320px). Did you mean @media (minWidth: 320px)? Check the render method of `LoginSidebar`.

My package.json looks like

{
  "name": "app-client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "material-ui": "^0.18.6",
    "radium": "^0.19.1",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-flexbox-grid": "^1.1.3",
    "react-router": "^4.1.1",
    "react-router-dom": "^4.1.1",
    "react-tap-event-plugin": "^2.0.1"
  },
  "devDependencies": {
    "react-scripts": "1.0.10"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Can someone please help me understand the issue and how to fix it? Thank you in advance

Source

hhimanshu

Most helpful comment

You need to Use StyleRoot.

import React from "react";
import Radium, {StyleRoot} from "radium";

var style = {

    width: "25%",
    color: "white",
    backgroundColor: "blue",

    '@media (min-width: 320px)': {
        width: '100%',
        backgroundColor: "orange"
    }
};

class LoginPage extends React.Component {
    render() {
        return (
                <LoginSidebar/>
        );
    }
}

const LoginSidebar = () => (
  <StyleRoot>
    <button style={style}>Login</button>
  </StyleRoot>
);
export default Radium(LoginPage);

HsuTing on 21 Jul 2017

🎉1 👍1

All 2 comments

You need to Use StyleRoot.

import React from "react";
import Radium, {StyleRoot} from "radium";

var style = {

    width: "25%",
    color: "white",
    backgroundColor: "blue",

    '@media (min-width: 320px)': {
        width: '100%',
        backgroundColor: "orange"
    }
};

class LoginPage extends React.Component {
    render() {
        return (
                <LoginSidebar/>
        );
    }
}

const LoginSidebar = () => (
  <StyleRoot>
    <button style={style}>Login</button>
  </StyleRoot>
);
export default Radium(LoginPage);

HsuTing on 21 Jul 2017

🎉1 👍1

Thanks for helping out @HsuTing 😄