web-dev-qa-db-fra.com

Couleur de l'arrière-plan définie dans le tiroir Material-UI

Comment définir simplement la couleur de fond du tiroir Material-UI? Essayé, mais ne fonctionne pas

<Drawer 
  style={listStyle3}
  open={this.state.menuOpened}
  docked={false}
  onRequestChange={(menuOpened) => this.setState({menuOpened})}
/>

const listStyle3 = {
  background: '#fafa00',
  backgroundColor: 'red'
}
javascriptreactjsmaterial-ui
3
Bobek

Edit: (Jan-19) - Interface utilisateur matérielle V3.8.3
Comme pour la dernière version demandée, la façon de configurer la backgroundColor serait de surcharger les classes.
Sur la base de la documentation matérielle-ui ici et de l’application css du tiroir ici - Vous pouvez le faire en créant un objet sous la forme:

const styles = {
  paper: {
    background: "blue"
  }
}

et en le passant au composant tiroir:

 <Drawer
      classes={{ paper: classes.paper }}
      open={this.state.left}
      onClose={this.toggleDrawer("left", false)}
    >

Un exemple de travail peut être vu dans this codesandbox.
N'oubliez pas d'envelopper votre composant avec la variable de contrôle withStyles du matériau-ui mentionnée ici

D'après les accessoires que vous avez utilisés, j'ai la raison de penser que vous utilisez une version inférieure à v1.3.1 (la dernière version stable), mais pour les prochaines questions que vous posez, je vous recommande d'écrire la version que vous utilisez.

Pour les versions inférieures à V1, vous pouvez modifier la propriété containerStyle comme suit:

<Drawer open={true} containerStyle={{backgroundColor: 'black'}}/>

4
Matan Bobi

Le tiroir n'accepte pas les accessoires de style. Utilisez classes à la place

Voir API de tiroir

0
Jorgedl