How do I change Material-UI MenuItem background on hover change from AutoComplete props?

Question

AutoComplete uses Menu to render MenuItems as shown in the docs on those pages.

I need to change the backgroundColor of the hovered MenuItem. I am able to change color of all items by using "menuItemStyle" which expects a style object but I'm not sure what the syntax for hover style is in the Material-UI style objects.

Answer 1

Applying hover style on root should do it.

const MyMenuItem = withStyles({
  root: {
    '&:hover': {
      backgroundColor: 'red !important',
      color: 'blue'
    }
  }
})(MenuItem)

Answer 2

They are still working on hoverColor which is possible in List Item. But for the time being you can use these Props

<MenuItem 
  primaryText="MenuItem"
  onMouseEnter={(e) => e.target.style.backgroundColor= 'red'}
  onMouseLeave={(e) => e.target.style.backgroundColor = '#ffffff'}/>

This might fix your problem temporarily.