1

I'm trying to figure out how to apply css styles to :active and :hover states of a Material-UI Menu.

The docs say,

selectedMenuItemStyle | object | | Override the inline-styles of selected menu items.

But applying,

<Menu selectedMenuItemStyle={{ color: 'red'}}>
 <MenuItem
   style={ menuItemStyles }
   primaryText={ pages.dashboard.title.toUpperCase() }
   containerElement={<NavLink to={ `${pages.dashboard.slug}` } />} />
</Menu>

has no effect when I click on <MenuItem>

I've also tried React-Router's activeStyle and activeClassName which have no effect because Material-UI overrides them.

Anyone know how to apply :active and :hover correctly?

mpint
  • 498
  • 5
  • 12
  • May be here is your answere https://stackoverflow.com/questions/41623914/how-to-set-focus-on-a-menuitem-in-material-ui?answertab=active#tab-top --by Cesar Ho – Thanh Ngo Oct 09 '17 at 07:09

1 Answers1

0

Have a look there : material-ui

Every component provides a className property. Those properties are always applied to the root element. Note that CSS properties defined inline are given priority over those defined in a CSS class. You need to use !important to take precedence over the inline style.

try to add !important on your custom style to override material-ui like

.test-class:hover {
  color: red !important
}
Matthieu B.
  • 1