materiał-ui zmienić wysokość szuflady

Question

Używam reakcji i materiałów-ui w moim projekcie i natknąłem się na prosty problem, którego po prostu nie umiem rozwiązać. Chcę utworzyć szufladę i ustawić jej wysokość tak, aby po jej otwarciu nie otwierała się nad paskiem aplikacji.

nie ma parametrów w komponencie Szuflada na wysokości, próbowałem też przesłonić jego styl i ustawienie wysokości na obiekcie w stylu jak ten:

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

Ale to nie działa.

Jedyny sposób, jaki mogę wymyślić, to edycja kodu komponentu Szuflady, ale oczywiście chcę tego uniknąć.

Każdy pomysł, w jaki sposób mogę zdefiniować wysokość?

Answer 1

Proszę bardzo:

<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 jest zabronione w wersji 1.0 i wyżej

Więc trzeba używać rekwizytów klas zamiast

Oto przykład tego nietrywialna sprawa

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)