webentwicklung-frage-antwort-db.com.de

So gestalten Sie das Material-Ui-Textfeld

Ich habe versucht herauszufinden, wie man eine material-ui.next-Textfeld -Komponente (React JS) formatiert.

<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 einen relevanten Teil angehängt):

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

Mein Problem ist, dass ich die Farbe des Textfelds nicht in weiß ändern kann. Ich scheine in der Lage zu sein, Styling auf das gesamte Textfeld anzuwenden (weil das Breite-Styling usw. funktioniert) ... aber ich denke, das Problem ist, dass ich die Stile nicht weiter in der Kette und in die eigentliche Eingabe anwende.

Ich habe versucht, die anderen Antworten zu betrachten, die mit dem Weitergeben von inputProps zu tun haben, aber ich hatte keinen Erfolg.

Ich habe alles nach besten Kräften versucht, aber ich muss fragen, ob jemand weiß, was ich falsch mache.

Ich danke Ihnen im Voraus für Ihre Zeit. andre

Wie sieht es aktuell aus?

What it currently looks like

7
Andre DiCioccio

Sie müssen die InputProps-Eigenschaft zum TextField hinzufügen.

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

JSX:

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

Daneben können Sie das Label auch stylen oder eine Überschreibung verwenden, wie hier .

7
Craig Myles

Ich würde vorschlagen, Ihren Stil innerhalb eines Themas zu halten.

const theme = createMuiTheme({
  overrides: {
    MuiInputBase: {
      input: {
        background: "#fff",
      },
    },
  },
});
1
Romero Junior

Versuchen Sie, die Variable inputStyle für TextField zu verwenden. Aus den docs ...

inputStyle (object) - Überschreibt die Inline-Stile der TextField-Eingabe Element. Wenn multiLine den Wert false hat: Definieren Sie den Stil der Eingabe Element. Wenn multiLine den Wert true hat: Definieren Sie den Stil des Containers von die textarea.

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

Alle Antworten hier zeigen, wie Dinge mit InputProps oder inputProps gestaltet werden, aber niemand hat erklärt, warum und wie dies funktioniert. Und niemand erklärte, was der Unterschied zwischen inputProps und InputProps ist

<TextField    
    variant="outlined"
    // inputProps are used to pass things that are native to the underlying html input element, things like name, id, style.
    inputProps={{
      style: { textAlign: 'center' },
    }
    // this passes props to the wrapper material component, can be  one of the following: Input, FilledInput, OutlinedInput
    // You can pass here anything that the underlying material component uses like error, value, onChange, and classes
    InputProps={{
       className: styles.slider_filter_input, 
       // usually you dont need className, the classes object will be sufficient
       //  but wanted to show that you can also use it (this will put your class on div of the InputBase)
       classes: {
          root: classes.root
          focused: classes.focused
          // the list of keys you pass here depend on your variant
          // if for example you used variant="outlined" then you need to check the css api of the OutlinedInput and so an
       }
    }}
/>

Schließlich ist hier eine funktionierende Codesandbox, die die obigen Ideen zeigt https://codesandbox.io/s/material-ui-drawer-8p6wv

0
ehab

Es hängt wirklich davon ab, was Sie genau ändern möchten. 

Die Dokumentation enthält eine Reihe von Beispielen zu benutzerdefinierten TextFields. Sehen Sie sich diese hier an:

https://material-ui.com/demos/text-fields/#customized-inputs

Weitere Informationen zur Anpassung finden Sie hier:

https://material-ui.com/customization/overrides/

und 

https://material-ui.com/customization/themes/

Haben Sie es mit! Versucht, wichtig für die Farbänderungen? Ich hatte das gleiche Problem, als ich versuchte, eine Standardfarbe für den Rand eines umrissenen TextFields festzulegen

Schauen Sie sich das an: https://stackblitz.com/edit/material-ui-custom-outline-color

0
Peter Catalin

Dies ist eine Lösung mit Inline-Styles:

<TextField
    style={{
        backgroundColor: "blue"
    }}
    InputProps={{
        style: {
            color: "red"
        }
    }}
/>
0
Jonathan R