Having trouble applying a breakpoint to the Material UI component, Raised button. I have managed to make it work for regular divs, but not for the Material UI component.
I attempted wrapping the button inside Radium
import RaisedButton from 'material-ui/RaisedButton';
const RadiumRaisedButton = Radium(RaisedButton);
Then I proceeded with
<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 the button style is as follows:
buttonStyle: {
width: 200,
'@media screen and (max-width:700px)': {
width: 200,
},
}
I need assistance in making this work. It works fine with the labelStyle property of the Raised button, but not with the required style property.
I have tried both versions max-width:700px and maxWidth:700px, but nothing seems to happen.