Working example of Material UI + Radium?

[kaycebasques]

I'm having a heck of a time getting Radium and Material UI to play nicely. Can you help me point out where I'm going wrong?

Live: https://materialui-radium.glitch.me/ Source: https://glitch.com/edit/#!/materialui-radium (edit the code and it automatically forks)

Expected:

• When viewport is greater than 600px, background color of cards turns to red.
• When you hover over the text, background color of text turns to green.

Actual:

• Background color of card is blue, so that style is getting applied correctly.
• Hover and media query don't work.

• Console throws:

  Warning: Unsupported style property @media (min-width: 600px). Did you mean @media (minWidth: 600px)? Check the render method of Paper.

Questions:

1. When I use StyleRoot on my top-level component, do I need to wrap that component in Radium, also?

...

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

export default Radium(App);

2. Or should I be wrapping the top-level component in my entry file?

...
ReactDOM.render(<StyleRoot><App/></StyleRoot>, document.getElementById('main'));

Sorry if it ends up being pilot-error, I'm new to it all (React / Material UI / Radium), so it's quite likely something silly on my side. But I figure this is a potentially popular combo, so you might be willing to help getting some boilerplate up and running.

[kaycebasques]

cc @oliviertassinari maybe you'd be willing to take a poke at it

[oliviertassinari]

@kaycebasques I'm happy you are trying radium with Material-UI. I haven't tried. Yeah, I would love to see Radium under https://material-ui-next.com/guides/interoperability/.

you'd be willing to take a poke at it

I'm not sure how I can help. I can reproduce the issue with (no Material-UI involved):

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

const styles = {
  card: {
    backgroundColor: 'blue',
    '@media (min-width: 600px)': { backgroundColor: 'red' }
  },
};

function Paper(props) {
  return <div {...props} />
}

class Card extends React.Component {
  render() {
    return (
      <Paper style={styles.card}>
        Card
      </Paper>  
    );
  }
}

export default Radium(Card);

https://glitch.com/edit/#!/fluff-brush