material-ui / reactjs菜单组件样式被破坏了

时间:2016-08-31 16:30:21

标签: reactjs material-ui

enter image description here

我按照下面的文档进行操作。 http://www.material-ui.com/#/components/popover

<Popover
  open={this.state.open}
  anchorEl={this.state.anchorEl}
  anchorOrigin={{horizontal: 'left', vertical: 'bottom'}}
  targetOrigin={{horizontal: 'left', vertical: 'top'}}
  onRequestClose={this.handleRequestClose}
>
  <Menu>
    <MenuItem primaryText="Sign out" onClick={this.props.logout} />
  </Menu>
</Popover>

登出菜单botton很难看。有谁知道为什么会这样?提前谢谢。

1 个答案:

答案 0 :(得分:2)

这是因为<MenuItem>组件使用type="button"属性呈现了一个范围,但在最新版本的materialize-css中设置了一个规则:

[type=reset], [type=submit], button, html [type=button] {
  -webkit-appearance: button;
}

您可以通过设置:

来修复它
[type=button]{
  -webkit-appearance: none
}

在全局css文件中。