FormidableLabs/radium

Working example of Material UI + Radium?

Open

#964 aberto em 26 de jan. de 2018

Ver no GitHub
 (2 comments) (1 reaction) (0 assignees)JavaScript (352 forks)batch import
docshelp wanted

Métricas do repositório

Stars
 (7.414 stars)
Métricas de merge de PR
 (Nenhuma PRs mesclada em 30d)

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.

Guia do colaborador