-Material UI Snackbar überlappt

Question

Ich verwende-Material UI Snackbar. Ich bin nicht sehr neu in der Material UI, aber irgendwie kann ich das Problem nicht lösen, d. H. Die Snackbar überlappt, wenn sie oben auf dem Bildschirm erscheint. Ich versuchte es auf verschiedene Arten, aber kein Glück. Kann mir bitte jemand helfen? Schätzen Sie Ihre schnelle Antwort. Nachstehend finden Sie die Snackbar-Komponente und ihren Körperstil. Finden Sie auch Screenshot für Ihre Ref.

bodyStyle:{ 
    border: "2px solid #ffffff", 
    minWidth: '50%', 
    maxWidth: '100%', 
    flexGrow: 0, 
    height:'55px', 
    backgroundColor: 'transparent', 
    fontFamily: "Open Sans,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif", 
    fontStyle: 'normal', 
    fontWeight: 400, 
    fontSize: 16 
} 
snackbarfromTop: { 
    top: 0, 
    color: white, 
    bottom: 'auto', 
} 

<Snackbar 
     open={this.state.open} 
     message={this.state.error} 
     autoHideDuration={4000} 
     bodyStyle={myTheme.bodyStyle} 
     action="Close" 
     onRequestClose={this.handleRequestClose} 
     onActionTouchTap={this.handleRequestClose} 
     style={myTheme.snackbarfromTop} 
     /> 

Answer 1

Aus dem Screenshot allein kann ich 100% nicht sagen, aber es scheint, Sie haben Ihre Snackbar transparent gerade gemacht mit:

backgroundColor: 'transparent' 

So sind Sie eigentlich durch es zu sehen.

Um dies zu beheben, sollten Sie eine backgroundColor Ihrer Komponente angeben, oder entfernen Sie den ‚transparent‘ überschreiben, wie zum Beispiel:

backgroundColor: '#bada55' 

Sie könnten am withStyles/withTheme HOC suchen, um möchten Ihre Farben zu erklären, in ein Platz und wiederverwenden sie in verschiedenen Komponenten, in diesem Fall haben Sie etwas wie das:

backgroundColor: theme.palette.my.predefined.color