如何在 AutoComplete 道具的悬停更改上更改 Material-UI MenuItem 背景？答案

【问题标题】：How do I change Material-UI MenuItem background on hover change from AutoComplete props?如何在 AutoComplete 道具的悬停更改上更改 Material-UI MenuItem 背景？
【发布时间】：2017-08-06 20:00:52
【问题描述】：

AutoComplete 使用 Menu 呈现 MenuItems，如这些页面上的文档中所示。

我需要更改悬停的 MenuItem 的背景颜色。我可以使用需要样式对象的“menuItemStyle”来更改所有项目的颜色，但我不确定 Material-UI 样式对象中悬停样式的语法是什么。

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

在根上应用悬停样式应该可以做到。

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

【讨论】：

【解决方案2】：

他们仍在处理hoverColor，这在列表项中是可能的。不过暂时可以使用这些Props

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

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

【讨论】：