material-ui更改抽屜的高度

Question

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

Drawer組件中沒有用於高度的參數，我還嘗試覆蓋其樣式並在樣式對象上設置高度，如下所示：

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

但這沒有用。

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

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

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)