Question

尝试在材质ui组件中实现断点，凸起按钮。正常div工作但不适用于材料ui组件

尝试在radium中包装按钮

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,
},
}

你可以在这里帮助我吗，它的工作是标签风格的凸起按钮，但不是必需的风格。尝试了两个版本max-width：700px和maxWidth：700px - 没有任何反应

Answer 1

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

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

如何在材质UI组件

1 个答案: