Material-ui hoverColor for MenuItem component?

material-ui, menu, menuitem, reactjs

Solution

You can do the following

<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>

Problem

I've read up on: https://github.com/callemall/material-ui/blob/master/src/styles/getMuiTheme.js and http://www.material-ui.com/#/customization/themes But can't seem to find the answer to what I'm looking for. I'm simply trying to change the color of the hovered item. I believe by looking at those docs I should just reference `menuItem` and provide a `hoverColor`, although that isn't working. Any thoughts? (don't mind the inline css overriding, just experimenting with different ways of doing things.) App ``` 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> ); } } ``` Nav ``` 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> ); } } ```

Original source