How to implement media Queries with Radium inside Material UI component

Question

Trying to implement breakpoint in Material UI component, Raised button. Working for normal div's but not for Material UI component

Tried wrapping button inside radium

import RaisedButton from 'material-ui/RaisedButton';
const RadiumRaisedButton = Radium(RaisedButton);

Followed by

<RadiumRaisedButton
  key={i}
  style={styles.buttonStyle}
  backgroundColor={color}
  labelColor={white}
  labelStyle={styles.labelStyle}
  onMouseEnter={() => {this.setState({hoverItem: i})}}
  onMouseLeave={() => {this.setState({hoverItem: currentRating})}}
  onClick={() => {this.setState({currentRating: i})}}
  label={category}
  type='button'
/>

and button style is

buttonStyle: {
  width: 200,
  '@media screen and (max-width:700px)': {
    width: 200,
  },
}

Can you help me here, its working in case of labelStyle prop of Raised button but not with style which is required. Tried both versions max-width:700px and maxWidth:700px - nothing happens.

Answer 1

Please use a brace pair for writing media query, this fix your problem:

buttonStyle: {
  width: 200,
  ['@media screen and (max-width:700px)']: {
    width: 100,
  },
};