Material-ui: Comment styliser la couleur d'entrée TextFields?

Créé le 20 déc. 2017 · 9Commentaires · Source: mui-org/material-ui

Il n'y a aucune indication sur la façon de changer la couleur du texte de ces entrées https://material-ui-next.com/demos/text-fields/

Utilisons-nous simplement des css externes pour ce faire?

J'ai également essayé cela mais cela ne passe pas les vérifications TypeScript:

 <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; }'.

Cela peut être purement un problème de types TypeScript

TextField question

Source

quantuminformation

👀3

Commentaire le plus utile

@QuantumInformation Je suis heureux que vous ayez trouvé une solution. J'encourage les gens à le faire de cette façon:

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

Notez que vous pouvez également cibler les noms de classe globaux ( .MuiInputBase-root et .MuiInputBase-input ).

oliviertassinari le 20 déc. 2017

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

Tous les 9 commentaires

Je viens de le faire avec un css externe

.something input {
  color: white;
}

quantuminformation le 20 déc. 2017

👎21 👍2 😕1

@QuantumInformation Je suis heureux que vous ayez trouvé une solution. J'encourage les gens à le faire de cette façon:

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

Notez que vous pouvez également cibler les noms de classe globaux ( .MuiInputBase-root et .MuiInputBase-input ).

oliviertassinari le 20 déc. 2017

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

Ne fonctionne pas dans "@material-ui/core"

sandy0096 le 13 juin 2018

👍32 😕1 😄1 👎1

Des mises à jour, comment le faire fonctionner avec @material-ui/core ? Je suis très coincé à ça

pankajparkar le 6 déc. 2018

@pankajparkar J'ai mis à jour ma réponse précédente pour travailler avec la dernière version: https://github.com/mui-org/material-ui/issues/9574#issuecomment -353179532. J'espère que cette aide, faites le moi savoir! Alternativement, nous avons une démo de personnalisation dans https://material-ui.com/demos/text-fields/#customized -inputs.

oliviertassinari le 6 déc. 2018

@oliviertassinari merci beaucoup. J'ai dû supprimer label pour que cela fonctionne.
Avez-vous une solution / solution de contournement pour le faire fonctionner avec l'étiquette. Je comprends pourquoi l'étiquette est superposée (je l'ai en quelque sorte partiellement triée en appliquant z-index , mais cela a conduit à des problèmes différents).

Problème codepen ici

pankajparkar le 7 déc. 2018

Merci beaucoup

vaydi le 8 oct. 2019

Dang, je n'ai jamais réalisé à quel point ma réponse initiale était impopulaire

quantuminformation le 8 oct. 2019

@oliviertassinari merci beaucoup. J'ai dû supprimer label pour que cela fonctionne.
Avez-vous une solution / solution de contournement pour le faire fonctionner avec l'étiquette. Je comprends pourquoi l'étiquette est superposée (je l'ai en quelque sorte partiellement triée en appliquant z-index , mais cela a conduit à des problèmes différents).
Problème codepen ici

J'ai aussi besoin exactement de la même chose!