Material-ui: Como estilizar a cor de entrada dos TextFields?

Criado em 20 dez. 2017 · 9Comentários · Fonte: mui-org/material-ui

Não há orientação sobre como alterar a cor do texto dessas entradas https://material-ui-next.com/demos/text-fields/

Nós apenas usamos css externo para fazer isso?

Eu também tentei isso, mas não passa nas verificações do 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; }'.

Isso pode ser puramente um problema de tipos de TypeScript

TextField question

Fonte

quantuminformation

👀3

Comentários muito úteis

@QuantumInformation Estou feliz por você ter encontrado uma solução. Eu encorajaria as pessoas a fazerem desta forma:

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

Observe que você também pode direcionar os nomes das classes globais ( .MuiInputBase-root e .MuiInputBase-input ).

oliviertassinari em 20 dez. 2017

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

Todos 9 comentários

Acabei de fazer isso com CSS externo

.something input {
  color: white;
}

quantuminformation em 20 dez. 2017

👎21 👍2 😕1

@QuantumInformation Estou feliz por você ter encontrado uma solução. Eu encorajaria as pessoas a fazerem desta forma:

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

Observe que você também pode direcionar os nomes das classes globais ( .MuiInputBase-root e .MuiInputBase-input ).

oliviertassinari em 20 dez. 2017

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

Não funciona em "@material-ui/core"

sandy0096 em 13 jun. 2018

👍32 😕1 😄1 👎1

Alguma atualização, como fazê-lo funcionar com @material-ui/core ? Estou muito preso a isso

pankajparkar em 6 dez. 2018

@pankajparkar Eu atualizei minha resposta anterior para trabalhar com a versão mais recente: https://github.com/mui-org/material-ui/issues/9574#issuecomment -353179532. Espero que ajude, me avise! Como alternativa, temos uma demonstração de personalização em https://material-ui.com/demos/text-fields/#customized -inputs.

oliviertassinari em 6 dez. 2018

@oliviertassinari muito obrigado. Tive que remover label para fazê-lo funcionar.
Você tem alguma solução / solução alternativa para fazê-lo funcionar com o rótulo. Eu entendo por que o rótulo fica sobreposto (eu meio que classifiquei parcialmente aplicando z-index , mas isso levou a problemas diferentes).

Codepen do problema

pankajparkar em 7 dez. 2018

Muito obrigado

vaydi em 8 out. 2019

Droga, nunca percebi o quão impopular minha resposta inicial foi

quantuminformation em 8 out. 2019

@oliviertassinari muito obrigado. Tive que remover label para fazê-lo funcionar.
Você tem alguma solução / solução alternativa para fazê-lo funcionar com o rótulo. Eu entendo por que o rótulo fica sobreposto (eu meio que classifiquei parcialmente aplicando z-index , mas isso levou a problemas diferentes).
Codepen do problema

Eu também preciso exatamente do mesmo!