MenuItem 组件的 Material-ui 悬停颜色？

Question

我已经阅读了：

https://github.com/callemall/material-ui/blob/master/src/styles/getMuiTheme.js

和

http://www.material-ui.com/#/customization/themes

但似乎无法找到我正在寻找的答案。我只是想改变悬停项目的颜色。我相信通过查看这些文档，我应该只参考menuItem并提供一个hoverColor，尽管这不起作用。有什么想法吗？

（不要介意内联 css 覆盖，只是尝试不同的做事方式。）

应用程序

class App extends Component {
  constructor(props) {
    super(props);
    injectTapEventPlugin();
  }

  render() {
    return (
      <MuiThemeProvider muiTheme={muiTheme}>
          <Router>
            <Grid fluid>
              <div style={style.navMovement}>
                <Route path="/" component={Nav} />
                <Switch>
                  <Route path="/home" component={Home} />
                </Switch>
              </div>
            </Grid>
          </Router>
      </MuiThemeProvider>
    );
  }
}

导航

class Nav extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return(
      <Drawer containerStyle={style.nav}>
        <Menu>
          <MenuItem
            style={{...style.navItem, borderLeft: '2px solid #38a9e3', hoverColor: '#495054' }}
            primaryText="Home"
            containerElement={<NavLink activeStyle={{color:'#53acff'}} to='/home'></NavLink>} />
        </Menu>
      </Drawer>
    );
  }
}

Answer 1

您可以执行以下操作

<Drawer containerStyle={style.nav}>
    <Menu>
      <MenuItem
        style={{...style.navItem, borderLeft: '2px solid #38a9e3' }}
        onMouseEnter={(e) => e.target.style.color = '#495054'}
        onMouseLeave={(e) => e.target.style.color = '#ffffff'}
        primaryText="Home"
        containerElement={<NavLink activeStyle={{color:'#53acff'}} to='/home'></NavLink>} />
    </Menu>
  </Drawer>