css - 如何在 Material UI 组件中使用 Radium 实现媒体查询

Question

尝试在 Material UI 组件中实现断点，Raised 按钮。适用于普通 div，但不适用于 Material UI 组件

尝试在镭内包裹按钮

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

其次是

<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'
/>

和按钮样式是

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

你能帮我吗，它在 Raised 按钮的 labelStyle 道具的情况下工作，但不是必需的样式。尝试了两个版本max-width:700px-maxWidth:700px没有任何反应。

Answer 1

请使用大括号对编写媒体查询，这可以解决您的问题：

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