drawNameコンポーネントのclassNameは動作しません

Question

私はreactとmaterial-uiを使用していますが、問題を見つけました。引き出しコンポーネントのCSS動作を定義したいと思います。私はclassNameプロパティを使用する必要がありますが、なんらかの理由で動作しません。私はdiv要素まだありません成功して引き出しをラップしようとした

<Drawer open={this.state.isLeftNavOpen} 
          docked={false} 
          className='drawer' 
          onRequestChange={this.changeNavState}> 
         <MenuItem primaryText='Men' 
            onTouchTap={() => browserHistory.push({pathname: '/products', query: {category: MEN}})}/> 
         <MenuItem primaryText='Women' 
            onTouchTap={() => browserHistory.push({pathname: '/products', query: {category: WOMEN}})}/> 
         <MenuItem primaryText='Kids' 
            onTouchTap={() => browserHistory.push({pathname: '/products', query: {category: KIDS}})}/> 
        </Drawer> 

：

.drawer { 
    width: 200px 
} 

.drawer:hover { 
    background-color: black 
} 

ここで引き出しの私の使い方は次のとおりです。

は、ここに私のCSSです。

私が間違っていることを知っていますか？

Answer 1

ライブラリはclassNameを追加しているようですが、この問題は、あなたが追加したクラスのものよりも優先される、要素にスタイルを直接設定する結果と思われます。 （fiddle）

<Drawer open={this.state.isLeftNavOpen} 
    docked={false} 
    width={200} 
    style={{'background-color': 'black'}} 
    className='drawer'> 

残念なことに：

1）styleおよび/またはwidthpropertiesでインライン幅とスタイルを設定する：図書館のようないくつかの変更/修正を、作るまでのオプションがいくつかありますこの方法では:hoverのスタイリングはできません。また、現在のインラインスタイリングソリューションは近い将来変更される可能性があります（issue 1951とそれに続くものを参照）。

2）はライブラリによって要素に設定それらを上書きする!importantとしてCSSでスタイルをマーク：それは、この特定の問題への現時点で唯一の真の解決策をしていることを意味します（fiddle）

.drawer { 
    width: 200px !important; 
} 

.drawer:hover { 
    background-color: black !important; 
} 

2つの組み合わせを使用して、幅を小道具として渡し、ホバーの背景スタイルのみを!importantにすることもできます。

（私がmaterial-uiの書き込み時に見つけた最も使いやすいパッケージに入っているので、FiddlesでLeftNav（古いバージョンのDrawer）を使用しているのはthis commentです）。