materiale-ui cambia l'altezza del cassetto

Question

Sto usando react e material-ui nel mio progetto e ho trovato un semplice problema che non so come risolvere. Voglio creare un cassetto e impostare la sua altezza in modo che quando si apre, non si apre sulla barra dell'applicazione.

Non v'è alcun parametro nel componente cassetto per l'altezza, ho anche cercato di ignorare il suo stile e la creazione di l'altezza sull'oggetto stile come questo:

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

Ma non ha funzionato.

L'unico modo in cui posso pensare è modificare il codice del componente Cassetto, ma naturalmente voglio evitarlo.

Qualche idea su come posso definire l'altezza?

Answer 1

Qui si va:

<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 è vietato nella versione 1.0 e superiori

Quindi è necessario l'utilizzo di elementi classi invece

Ecco un esempio di questo non banale case

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)