material-ui/reactjs菜单组件样式中断

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

Signout菜单钮是丑陋的。有谁知道为什么会发生这种情况？提前致谢。

来源

2016-08-31 jhlosin

这是因为<MenuItem>组件呈现一个跨度type="button"属性，但在materialize-css最后版本，设定了规则：

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

您可以通过设置修复：

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

在一个全球性的css文件。

来源

2016-09-01 08:27:48

在React Material UI中，组件具有内联样式，所以不要忘记css文件中的'！important'。 –

实际上，我没有看到该属性被内联样式覆盖。但它可能是。 –

这是否意味着我需要物化css/js以便在使用MaterialUI时导入？我试图添加它，但它打破了所有的结构......猜测它与其他css文件冲突。 – jhlosin

material-ui/reactjs菜单组件样式中断

回答

相关问题