material-ui 改变抽屉高度答案

【问题标题】：material-ui change the height of the drawermaterial-ui 改变抽屉高度
【发布时间】：2016-10-09 06:50:02
【问题描述】：

我在我的项目中使用 react 和 material-ui，我遇到了一个我不知道如何解决的简单问题。我想创建一个抽屉并设置它的高度，使其在打开时不会在应用栏上方打开。

Drawer 组件中没有高度的参数，我也尝试覆盖它的样式并像这样在样式对象上设置高度：

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

但是没有用。

我能想到的唯一方法是编辑抽屉组件的代码，但我当然想避免这种情况。

知道如何定义高度吗？

【问题讨论】：

你试过将它包裹在一个 div 中并改变它的高度吗？

标签： css reactjs material-ui

【解决方案1】：

containerStyle 1.0 及以上版本禁止

所以你需要使用 props classes 来代替

这是这个不平凡案例的一个例子

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)

【讨论】：

'Paper' 是 Dock 的子元素，高度应该在 'drawer' 键上classes={{docked: classes.paper}}
如果我将height: '100%' 添加到styles 对象中的paper 类中，抽屉将不会转到100%... 在我的情况下docked: 也会返回错误。还有其他方法吗？

【解决方案2】：

给你：

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

【讨论】：

谢谢伙计，我不能为你的回答 +1，因为我没有足够的代表，我会在有能力的时候做
知道如何将 zDepth 减去？？
containerStyle 不是当前版本 3.1.2 中支持的属性
您可能会从问题（和答案）的日期猜到它与 v0.0 相关。从 v1 开始，您可以使用 className 属性传入 CSS 类。