Wie style Material-UI Textfeld

Question

Ich habe versucht zu erarbeiten, wie man ein Material -ui.next Textfeld (https://material-ui-next.com/demos/text-fields/) Komponente (Reagieren JS).

<TextField 
    id="email" 
    label="Email" 
    className={classes.textField} 
    value={this.state.form_email} 
    onChange={this.handle_change('form_email')} 
    margin="normal" 
/> 

Meine Klassen werden wie folgt erstellt (ich habe relevanten Teil im Anhang):

const styles = theme => ({ 
    textField: { 
     width: '90%', 
     marginLeft: 'auto', 
     marginRight: 'auto', 
     color: 'white', 
     paddingBottom: 0, 
     marginTop: 0, 
     fontWeight: 500 
    }, 
}); 

Mein Problem ist, dass ich nicht die Farbe des Textfeldes scheinen, auf Weiß zu ändern. Ich scheine in der Lage zu sein, das Styling auf das gesamte Textfeld anzuwenden (weil das Breiten-Design funktioniert usw.) ... aber ich denke, das Problem ist, dass ich die Stile nicht weiter unten in der Kette und in der tatsächlichen Eingabe anwende.

Ich habe versucht, die anderen Antworten zu betrachten, die sich mit der Übergabe von inputProps befassen, hatte aber keinen Erfolg.

Ich habe alles so gut wie möglich versucht, denke aber, dass ich fragen muss, ob jemand weiß, was ich falsch mache.

Wir danken Ihnen im Voraus für Ihre Zeit. Grüße. andre

What it currently looks like

Answer 1

Es ist fixierbar, indem ein "Thema" zu schaffen.

Erstens gerendert ich die Hauptkomponente in einem Thema:

<MuiThemeProvider theme={my_theme_name}> 
    <PageLayout/> 
</MuiThemeProvider> 

Das Thema Datei verwendet createMuiTheme und enthalten eine Palette Abschnitt:

export const my_theme_name = createMuiTheme({ 
    palette: { 

    type: 'dark', 
    }, 
}); 

Der Fang war der „Typ: 'dunkel' " Spezifikation. Das hat mein Problem behoben.

Weitere Informationen [hier] [] falls erforderlich.

Answer 2

Versuchen Sie, die inputStyle prop auf TextField verwenden. Vom docs ...

inputStyle (Objekt) - Überschreiben Sie die Inline-Stile des Eingangs Elements TextField-. Wenn multiLine den Wert false hat, definieren Sie den Stil des Elements . Wenn multiLine wahr ist: Definieren Sie den Stil des Containers das Textfeld.

<TextField inputStyle={{ backgroundColor: 'red' }} />