Материал-ui изменить высоту выдвижного ящика

Question

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

Там нет параметра в компоненте выдвижного ящика для высоты, я также пытался отменить свой стиль и настройки высоты на объекте стиля, как это:

<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

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)