material-ui改变抽屉的高度

Question

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

Drawer组件中没有高度参数,我也尝试覆盖它的样式并在样式对象上设置高度,如下所示:

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

但它没有用.

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

关于如何定义高度的任何想法？

Answer 1

干得好:

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

Answer 2

版本1.0及更高版本禁止使用containerStyle

所以,你需要使用道具类,而不是

这是一个非常重要案例的例子

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)

Answer 3

对于 mui 中较新版本的 Drawer，您可以通过传递此道具来执行类似的操作

      <Drawer
        PaperProps={{
          sx: {
            height: 'calc(100% - 64px)',
            top: 64,
          },
        }}
      >