React Material-UIスタイリングアクティブなメニュー項目

Question

材料スタイルのUIメニューの:activeと:hoverの状態にCSSスタイルを適用する方法を理解しようとしています。

ドキュメントは言う、

selectedMenuItemStyle |オブジェクト| |選択したメニュー項目のインラインスタイルをオーバーライドします。私は、私も試してみた<MenuItem>

をクリックしたとき

しかし、適用、

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

は効果がありませんリアクト・ルータのactiveStyleと材料-UIがそれらを上書きしますので、何の効果もありませんactiveClassName。

:activeと:hoverを正しく適用する方法を知っていますか？

Answer 1

が見てください：material-ui

すべてのコンポーネントは、classNameプロパティを提供します。これらのプロパティは常にルート要素に適用されます。 インラインで定義されたCSSプロパティは、CSSクラスで定義されたものよりも優先されます。 ！importantを使用してインラインスタイルよりも優先させる必要があります。

.test-class:hover { 
    color: red !important 
}