material-ui更改抽屜的高度

我在項目中使用了react和material-ui，我遇到了一個簡單的問題，我只是不知道如何解決。我想創建一個抽屜，並設置它的高度，當它打開時，它不會打開應用欄。material-ui更改抽屜的高度

有一個在抽屜組件的高度不帶參數，我也嘗試重寫它的風格和樣式對象這樣的設置高度：

<Drawer style={{height:'90%'}} />

但沒有奏效。

我能想到的唯一方法是編輯Drawer組件的代碼，但是當然我想避免這種情況。

關於如何定義高度的任何想法？

來源

2016-06-08 David Cohen

你有沒有試過把它包裝在一個div中，並改變它的高度？ – ZekeDroid

在這裏你去：

<Drawer open={this.state.open} containerStyle={{height: 'calc(100% - 64px)', top: 64}}> 
    <MenuItem>Menu Item</MenuItem> 
    <MenuItem>Menu Item 2</MenuItem> 
</Drawer>

來源

2016-06-08 22:51:04 Matt

感謝隊友，我不能+1你的答案，因爲我沒有足夠的代表，我會做到這一點，當我將能夠 –

任何想法如何得到負的zDepth？ – Zohair

乾杯隊友，完美的作品！ – stoerebink

containerStyle禁止在1.0及以上版本

所以你需要使用的道具類代替

下面是一個例子，這個平凡的案例

import {withStyles, createStyleSheet} from 'material-ui/styles' 
const styleSheet = createStyleSheet({ 
    paper: { 
    height: 'calc(100% - 64px)', 
    top: 64 
    } 
}) 
class CustomDrawer extends Component { 
    ... 
    render() { 
    const classes = this.props.classes 
    return (
     <Drawer 
     classes={{paper: classes.paper}} 
     > 
     ... 
    ) 
} 

CustomDrawer.propTypes = { 
    classes: PropTypes.object.isRequired 
} 

export default withStyles(styleSheet)(CustomDrawer)

來源

2017-08-12 12:33:17

'紙'是Dock的孩子，高度應該在'抽屜'鍵'class = {{docked：classes.paper}}上' –

material-ui更改抽屜的高度

回答

相關問題