Material-ui: Wie gestalte ich die Eingabefarbe von TextFields?

Erstellt am 20. Dez. 2017 · 9Kommentare · Quelle: mui-org/material-ui

Es gibt keine Anleitung zum Ändern der Textfarbe dieser Eingaben. Https://material-ui-next.com/demos/text-fields/

Verwenden wir dazu nur externes CSS?

Ich habe dies auch versucht, aber es besteht keine TypeScript-Prüfung:

 <TextField
          inputProps={{ style: { fontFamily: 'Arial', color: 'white'}}}
          style={{ flex: 1, margin: '0 20px 0 0', color: 'white'}}
          onChange={(e: ChangeEvent<HTMLInputElement>) => changeSearch(e.target.value)}
          type="text"
          value={reducerState.search}
        />

(50,11): error TS2339: Property 'inputProps' does not exist on type 'IntrinsicAttributes & TextFieldProps & { children?: ReactNode; }'.

Dies kann ein reines Problem mit TypeScript-Typen sein

TextField question

Quelle

quantuminformation

👀3

Hilfreichster Kommentar

@QuantumInformation Ich bin froh, dass Sie eine Lösung gefunden haben. Ich würde die Leute ermutigen, es so zu machen:

import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";

const styles = {
  root: {
    background: "black"
  },
  input: {
    color: "white"
  }
};

function CustomizedInputs(props) {
  const { classes } = props;

  return (
    <TextField
      defaultValue="color"
      className={classes.root}
      InputProps={{
        className: classes.input
      }}
    />
  );
}

CustomizedInputs.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(CustomizedInputs);

https://codesandbox.io/s/1370v7y4zj

capture d ecran 2018-12-06 a 19 31 05

Beachten Sie, dass Sie auch auf die globalen Klassennamen abzielen können ( .MuiInputBase-root und .MuiInputBase-input ).

oliviertassinari am 20. Dez. 2017

👍45 🎉8 ❤4 😕3 👀2 🚀1

Alle 9 Kommentare

Ich habe es gerade mit externem CSS gemacht

.something input {
  color: white;
}

quantuminformation am 20. Dez. 2017

👎21 👍2 😕1

@QuantumInformation Ich bin froh, dass Sie eine Lösung gefunden haben. Ich würde die Leute ermutigen, es so zu machen:

import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";

const styles = {
  root: {
    background: "black"
  },
  input: {
    color: "white"
  }
};

function CustomizedInputs(props) {
  const { classes } = props;

  return (
    <TextField
      defaultValue="color"
      className={classes.root}
      InputProps={{
        className: classes.input
      }}
    />
  );
}

CustomizedInputs.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(CustomizedInputs);

https://codesandbox.io/s/1370v7y4zj

capture d ecran 2018-12-06 a 19 31 05

Beachten Sie, dass Sie auch auf die globalen Klassennamen abzielen können ( .MuiInputBase-root und .MuiInputBase-input ).

oliviertassinari am 20. Dez. 2017

👍45 🎉8 ❤4 😕3 👀2 🚀1

Funktioniert nicht in "@material-ui/core"

sandy0096 am 13. Juni 2018

👍32 😕1 😄1 👎1

Irgendwelche Updates, wie man es mit @material-ui/core ? Daran stecke ich fest

pankajparkar am 6. Dez. 2018

@pankajparkar Ich habe meine vorherige Antwort aktualisiert, um mit der neuesten Version zu arbeiten: https://github.com/mui-org/material-ui/issues/9574#issuecomment -353179532. Ich hoffe diese Hilfe, lass es mich wissen! Alternativ haben wir eine Anpassungsdemo unter https://material-ui.com/demos/text-fields/#customized -inputs.

oliviertassinari am 6. Dez. 2018

@oliviertassinari vielen Dank. Ich musste label entfernen, damit es funktioniert.
Haben Sie eine Lösung / Problemumgehung, damit es mit dem Etikett funktioniert? Ich verstehe, warum das Etikett überlagert wird (ich habe es teilweise sortiert, indem ich z-index , aber das führte zu verschiedenen Problemen).

Problemcodepen hier

pankajparkar am 7. Dez. 2018

vielen Dank

vaydi am 8. Okt. 2019

Dang, ich habe nie bemerkt, wie unbeliebt meine erste Antwort war

quantuminformation am 8. Okt. 2019

@oliviertassinari vielen Dank. Ich musste label entfernen, damit es funktioniert.
Haben Sie eine Lösung / Problemumgehung, damit es mit dem Etikett funktioniert? Ich verstehe, warum das Etikett überlagert wird (ich habe es teilweise sortiert, indem ich z-index , aber das führte zu verschiedenen Problemen).
Problemcodepen hier

Ich brauche auch genau das gleiche!

AjithkumarJM am 21. Aug. 2020

War diese Seite hilfreich?

0 / 5 - 0 Bewertungen

Material-ui: Wie gestalte ich die Eingabefarbe von TextFields?

Hilfreichster Kommentar

Alle 9 Kommentare

Verwandte Themen