webentwicklung-frage-antwort-db.com.de

Hintergrundfarbe der Material-UI-Schublade

So legen Sie einfach die Hintergrundfarbe der Material-UI-Schublade fest Hat dies versucht, funktioniert aber nicht

<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) - Material UI V3.8.3
Wie für die neueste Version wurde die backgroundColor konfiguriert, indem die Klassen überschrieben wurden.
Basierend auf Material-UI-Dokumentation hier und der css-API für Schublade hier - Dies kann durch Erstellen eines Objekts in der Form von gemacht werden:

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

und übergeben es an die Schubladenkomponente:

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

Ein Funktionsbeispiel ist in this codesandbox zu sehen.
Vergessen Sie nicht, Ihre Komponente mit withStyles HoC von material-ui zu umwickeln, wie hier hier

Basierend auf den verwendeten Requisiten kann ich annehmen, dass Sie eine Version verwenden, die niedriger ist als v1.3.1 (die letzte stabile Version). Für die nächsten Fragen, die Sie stellen, empfehle ich Ihnen, die Version zu schreiben, die Sie verwenden.

Bei einer Version unter V1 können Sie die containerStyle -Eigenschaft folgendermaßen ändern:

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

4
Matan Bobi

Schublade akzeptiert keine Stilrequisiten. Verwenden Sie stattdessen classes

Siehe Drawer API

0
Jorgedl