FormidableLabs/radium

Working example of Material UI + Radium?

Open

#964 ouverte le 26 janv. 2018

Voir sur GitHub
 (2 commentaires) (1 réaction) (0 assignés)JavaScript (352 forks)batch import
docshelp wanted

Métriques du dépôt

Stars
 (7 414 stars)
Métriques de merge PR
 (Aucune PR mergée en 30 j)

Description

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);
  1. 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.

Guide contributeur