React Material-UI样式活动菜单项

Question

我正在尝试弄清楚如何将css样式应用于Material-UI菜单的:active和:hover状态。

文档说，

  

selectedMenuItemStyle |对象| |覆盖所选菜单项的内联样式。

但申请，

<Menu selectedMenuItemStyle={{ color: 'red'}}>
 <MenuItem
   style={ menuItemStyles }
   primaryText={ pages.dashboard.title.toUpperCase() }
   containerElement={<NavLink to={ `${pages.dashboard.slug}` } />} />
</Menu>

点击<MenuItem>

后

无效

我还尝试过React-Router的activeStyle和activeClassName，因为Material-UI会覆盖它们，因此无效。

任何人都知道如何正确应用:active和:hover？

Answer 1

看看那里：material-ui

  

每个组件都提供className属性。这些属性始终应用于根元素。   请注意，内联定义的CSS属性优先于CSS类中定义的CSS属性。你需要使用！important来优先于内联样式。

尝试在自定义样式上添加!important以覆盖材料-ui，如

.test-class:hover {
  color: red !important
}