CODEWITHSUNDEEP
reactjsmenumenuitemmaterial-ui
Greg Miller
Greg Miller

Reputation: 1084

Material-ui hoverColor for MenuItem component?

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>
    );
  }
}

Upvotes: 5

Views: 10022

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 281606

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>

Upvotes: 5

Related Questions