material-ui/reactjs 菜单组件样式坏了答案

【问题标题】：material-ui/reactjs menu component style is brokenmaterial-ui/reactjs 菜单组件样式坏了
【发布时间】：2017-01-08 08:18:05
【问题描述】：

我从下面跟着文档。 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>

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

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

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

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

你可以通过设置来修复它：

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

在全局 css 文件中。

【讨论】：

在 React Material UI 中，组件具有内联样式，所以不要忘记 css 文件中的!important。
实际上，我没有看到该属性会被内联样式覆盖。但它可能是。
这是否意味着我在使用 MaterialUI 时需要物化 css/js 才能导入？我试图添加它，但它破坏了所有结构......猜测它与其他 css 文件冲突。
这些样式是默认导入的，你所要做的就是在你自己的全局css文件中覆盖这个规则。
请注意，描述符需要至少与 normalize.css 中的描述符一样具体，即html [type=button]。我在我的 css 文件中完全使用了它，因为我的样式 after 在我的 html 中进行了规范化。如果你的风格是第一位的，你还需要更具体。