web-dev-qa-db-fra.com

matériel-ui changer la hauteur du tiroir

J'utilise react et material-ui dans mon projet et je suis tombé sur un problème simple que je ne sais pas comment résoudre. Je veux créer un tiroir et définir sa hauteur de manière à ce qu'il ne s'ouvre pas au-dessus de la barre d'application lorsqu'il s'ouvrira.

Il n'y a pas de paramètre dans le composant Drawer pour la hauteur, j'ai également essayé de remplacer son style et de configurer la hauteur sur l'objet style comme ceci:

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

Mais ça n'a pas marché.

La seule façon dont je peux penser, c'est d'éditer le code du composant Drawer, mais bien sûr, je veux éviter cela.

Une idée sur la façon dont je peux définir la hauteur?

cssreactjsmaterial-ui
16
David Cohen

Voici:

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

containerStyle est interdit dans les versions 1.0 et supérieures

Vous devez donc utiliser des accessoires classes à la place

Voici un exemple de ce cas non trivial

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)
9
Serge Seletskyy