问题
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>
);
}
}
回答1:
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>
来源:https://stackoverflow.com/questions/43839297/material-ui-hovercolor-for-menuitem-component