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菜單組件樣式中斷

回答

相關問題