Material-ui hoverColor是否为MenuItem组件? [英] Material-ui hoverColor for MenuItem component?

问题描述

我已阅读以下内容:

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

和

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

但是似乎找不到我要找的答案.我只是在尝试更改悬停项目的颜色.我认为，通过查看这些文档，我应该只引用 menuItem 并提供 hoverColor ，尽管那是行不通的.有什么想法吗?

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?

(不要介意内联css重写，只是尝试使用不同的处理方式.)

(don't mind the inline css overriding, just experimenting with different ways of doing things.)

应用

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

推荐答案

您可以执行以下操作

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

这篇关于Material-ui hoverColor是否为MenuItem组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！