我该如何从AutoComplete属性更改Material-UI MenuItem背景颜色？在鼠标悬停时进行变化。

Question

自动完成使用菜单来呈现如这些页面上所示的MenuItems。

我需要更改悬停MenuItem的背景颜色。我可以通过使用“menuItemStyle”更改所有项目的颜色，该属性期望一个样式对象，但是我不确定Material-UI样式对象中悬停样式的语法。

- Saumil Patel

Answer 1

在根元素上应用悬停样式即可。

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

- Yuki

Answer 2

他们仍在处理hoverColor，这在列表项中是可能的。 但目前您可以使用这些属性

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

这可能暂时解决您的问题。

- Dhaval Jardosh