reactjs - React Material-UI styling active menu items -
i'm trying figure out how apply css styles :active
, :hover
states of material-ui menu.
the docs say,
selectedmenuitemstyle | object | | override 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 click on <menuitem>
i've tried react-router's activestyle
, activeclassname
have no effect because material-ui overrides them.
anyone know how apply :active
, :hover
correctly?
have there : material-ui
every component provides classname property. properties applied root element. note css properties defined inline given priority on defined in css class. need use !important take precedence on inline style.
try add !important
on custom style override material-ui like
.test-class:hover { color: red !important }
Comments
Post a Comment