CODEWITHSUNDEEP
reactjsmaterial-ui
jhlosin
jhlosin

Reputation: 575

material-ui/reactjs menu component style is broken

enter image description here

I followed the doc from below. 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 menu botton is ugly. Does anyone know why this is happening? Thanks in advance.

Upvotes: 3

Views: 864

Answers (1)

Alexandr Lazarev
Alexandr Lazarev

Reputation: 12872

This happens because <MenuItem> components renders a span with type="button" attribute, but in last versions of materialize-css there is set a rule:

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

You can fix it by setting:

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

In a global css file.

Upvotes: 2

Related Questions