Radium: Media queries throwing error: Unsupported style property

[tuckerconnelly]

Getting this error when I use a media query:

Warning: Unsupported style property @media (min-width: 60rem). Did you mean @media (minWidth: 60rem)?

However, when I change it to minWidth, the media query doesn't work :X

[tuckerconnelly]

Ok found the problem:

Using regular html child components works great:

export default Radium(() =>
  <div>
    <div style={styles.styleWithMediaQuery}>Child div</div>
  </div>
)

But when I use my own component, it doesn't work:

export default Radium(() =>
  <div>
    <MyCustomComponent style={styleWithMediaQuery} />
  </div>

// MyCustomComponent

const styles = {
  myCustomComponent: {...}
}

export default ({ style }) =>
  <div style={{...style, ...styles.myCustomComponent}} />
}

This of course doesn't work because MyCustomComponent is merging the styles and passing them to div without being wrapped in Radium. You can get it to work either by wrapping MyCustomComponent in Radium OR by not merging styles and passing up an unstyled div.

Would be nice if Radium could support these merged styles somehow :) For now I'll have to create a fork of material-ui and wrap all the components in Radium.

[rynti]

I've experienced similar issues when using Radium in conjunction with material-ui. I was actually wondering if there was a way to manually invoke the Radium generation of a prefixed style object + class name for media queries. That way we could manually pass the style and className attributes to third-party components.

For example, I'd like to have something in the likes of:

getStyle() {
  return {
    fontSize: 16,
    '@media (min-width: 768px)': {
      fontSize: 24,
    }
  };
},
render() {
  const { style, className } = Radium.generate(this.getStyle());
  return <MyComponent style={style} className={className} />;
},

[tuckerconnelly]

Why does Component.render() only render one level deep? If we could get resolve-styles to render the whole tree, you could put Radium in the StyleRoot and not even worry about putting it on individual components.

Just a thought :o)

[ClemMakesApps]

I encountered this issue today as well - couldn't get custom components to size correctly using media queries.

[ianobermiller]

@tuckerconnelly it certainly is possible to make Radium work by only applying it at the top level. It does, however, break component encapsulation. See https://github.com/elierotenberg/react-traverse if you are curious how.

@rynti it's not really possible to invoke Radium manually; your component would never update with :hover styles, and any JS media query listeners would never fire.

[ianobermiller]

@tuckerconnelly I'm going to close this issue for now. If there is some specific action we can take to clear this up, comment here and we can reopen.

[tylergaw]

Know this is a closed issue, but wanted to throw out a question/thought/general spitballin'.

My team is running up against this same issue, specifically the case where we're using Material UI and attempting to apply media queries to MUI components.

I'm wondering why Radium suggests and only allows hyphenated media query conditions? One thing I noticed in my testing was that MUI components specifically allow for camelCased media query conditions. I'm not sure of the exact mechanism there, but it did work in our case.

I don't want to just outright suggest switching to or allowing for camelCase media query conditions, but was just curious as to why Radium went down the hyphenated path for those while other libs–and all other properties in Radium–went the camelCase direction.

At the moment, we're just choosing to ignore the unsupported property error, because that's the only negative side-effect and it doesn't happen in production builds. The styles are applied just fine.

[alexlande]

Reopening for visibility (I'm not familiar with the issue at hand, but at least this way we won't lose track of it!)

[DylanYasen]

Encountered the same issue.
Ignoring the warning for now.

[romshiri]

Hey guys, encountered the same problem - any solution / workaround?

[keabard]

Hey everyone,

@tylergaw how did you manage to make it work with material-ui ? Where did you put the StyleRoot and what did you encapsulate with Radium() ? Can't manage to make my media queries work :/

[neovea]

Hi, this is a really weird issue : I had no problem till now. But it fires the same error message, for one line only. Other lines using the exact same property has no problem et works like a charm :

const select = {
  default: {
    borderColor: Colors.primary,
    height: '50px',
    lineHeight: '50px',
    borderRadius: '2px',
    '@media only screen and (max-width: 767px)': { // not ok
      marginBottom: '10px'
    }
  }
}
// further 
const button = {
  default: {
    display: 'block',
    width: '100%',
    maxWidth: '360px',
    margin: '4rem auto',
    '@media only screen and (max-width: 767px)': { // ok
      margin: '1rem auto'
    }
  }
}

Has any one else meet this case ?

Thx

[gerhr]

So what about passing mysterious function Radium.generate in Component context, to provide style
as any props directly for child component, like in MUI we do? For example Drawer

<Drawer
  zDepth={0}
  open={this.state.open}
  width={240}
  containerStyle={this.context.Radium.generate(styles.nav_menu)}>
        <NavLinksList linksTree={this.state.linksMap} />
</Drawer>

And my fantasy: why not to enhance component events through hidden prototypes right in Styles object, and use .valueOf for raw styles data?

[douglasrcjames]

Still running into this error, ignoring it for now, but would be nice to clear it with a fix!