material-ui/reactjs menu component style is broken

Question

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.

Alexandr Lazarev · Accepted Answer · 2016-09-01 08:27:48Z

2

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.

answered Sep 1, 2016 at 8:27

Alexandr Lazarev

13k4 gold badges40 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Nicolas Rouvière Over a year ago

In React Material UI, components have inline style, so don't forget !important in the css file.

Alexandr Lazarev Over a year ago

Actually, I didn't see that property to be overridden by inline styles. But it may be.

jhlosin Over a year ago

does this mean I need materialize css/js to be imported when I use MaterialUI? I tried to add it but it broke all the structure... guess it conflict with other css files.

Alexandr Lazarev Over a year ago

Those styles are imported by default, all you have to do, is to override this rule in your own global css file.

Periata Breatta Over a year ago

Note that the descriptor will need to be at least as specific as the one in normalize.css, which is html [type=button]. I used exactly that in my css file, which works because I have my styles after normalize in my html. If your styles are first, you'll need to be more specific still.

Collectives™ on Stack Overflow

material-ui/reactjs menu component style is broken

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related