的className上的紙盒組件不工作

我使用的是反應和材料的UI和我所遇到的問題，我想定義抽屜組件一些CSS的行爲，我已閱讀，這是很簡單的，所有的我必須做的是使用className屬性，但由於某種原因，它不起作用。的className上的紙盒組件不工作

這裏是我的CSS：

.drawer { 
    width: 200px 
} 

.drawer:hover { 
    background-color: black 
}

這裏是我的抽屜的使用：

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

我試着用格，但仍然沒有成功包裝紙盒。

任何想法我做錯了什麼？

來源

2016-06-12 Pachu

看到這裏：https://github.com/callemall/material-ui/issues/2310, 你可能需要傳遞你的風格內聯.. – JordanHendrix

該庫確實似乎添加了className，但是您看到的這個問題似乎是material-ui直接在元素上設置樣式的結果，該元素優先於您添加的類上的樣式。有幾個選項，直到庫使得一些更改/修復，如：

1）設定的寬度和樣式內嵌在style和/或widthproperties：（fiddle）

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

不幸的是這種方法雖然不支持:hover樣式，並且他們當前的內聯樣式解決方案很可能在不久的將來發生變化（請參閱issue 1951及其後面的樣式）。這意味着，在目前這個特定的問題，您的唯一真正的解決辦法是：

2）標記在CSS樣式爲!important覆蓋那些庫中的元素上設置：（fiddle）

.drawer { 
    width: 200px !important; 
} 

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

也可以使用這兩者的組合，使寬度爲道具和僅具有懸停背景風格是!important。（使用LeftNav（較舊版本的抽屜），因爲它在我寫的material-ui，在this comment上找到它的時候可以找到的最易於使用的包）。

來源

2016-06-12 20:44:30

我剛剛讀到，他們會想出一個更好的解決方案如下所示：https：//github.com/callemall/material-ui/issues/4066 它將進入下一個版本（0.16.0），但在此期間，什麼可以我做？我嘗試使用！很重要，但它沒有工作，它沒有做任何改變 – Pachu

在CSS _should_ work中使用帶'！important'的className prop，它似乎在[fiddle]（https：// jsfiddle。淨/ DirectCtrl/6knx4bsc /）。你能提供一個類似的例子，你的代碼可以運行嗎？ –

由於某種原因，它以前不適用於我，但現在它可以，除了動畫。我嘗試了下面的例子： https://jsfiddle.net/6knx4bsc/3/和動畫不起作用。 – Pachu

的className上的紙盒組件不工作

回答

相關問題