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更改抽屉的高度

回答

相关问题