material-ui/reactjs 菜单组件样式损坏

Question

我按照下面的文档操作。 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>

注销菜单按钮很难看。有谁知道为什么会这样？提前致谢。

Answer 1

发生这种情况是因为 <MenuItem> 组件呈现具有 type="button" 属性的跨度，但在 materialize-css 的最新版本中设置了规则：

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

您可以通过设置修复它：

[type=button]{
  -webkit-appearance: none
}

在全局 css 文件中。

material-ui/reactjs 菜单组件样式损坏

material-ui/reactjs menu component style is broken

reactjs

material-ui