материал-ui меняет высоту ящика

Я использую реакцию и материал-ui в своем проекте, и я столкнулся с простой проблемой, которую я просто не знаю, как ее решить. Я хочу создать ящик и установить его высоту таким образом, что когда он откроется, он не откроется поверх панели приложений.

В компоненте Drawer для высоты нет параметра, я также попытался переопределить его стиль и настроить высоту объекта стиля следующим образом:

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

Но это не сработало.

Единственный способ, о котором я могу думать, - редактировать код компонента Drawer, но, конечно, я хочу этого избежать.

Любая идея о том, как я могу определить высоту?

Ответ 1

Ну вот:

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

Ответ 2

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)