Material-ui: Как стилизовать цвет ввода текстовых полей?

Созданный на 20 дек. 2017 · 9Комментарии · Источник: mui-org/material-ui

Нет инструкций по изменению цвета текста этих полей https://material-ui-next.com/demos/text-fields/.

Мы просто используем внешний CSS для этого?

Я тоже пробовал это, но он не проходит проверки 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; }'.

Это может быть чисто проблема типов TypeScript

TextField question

Источник

quantuminformation

👀3

Самый полезный комментарий

@QuantumInformation Я рад, что вы нашли решение. Я бы посоветовал людям сделать это так:

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

Обратите внимание, что вы также можете настроить таргетинг на имена глобальных классов ( .MuiInputBase-root и .MuiInputBase-input ).

oliviertassinari 20 дек. 2017

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

Все 9 Комментарий

Я только что сделал это с помощью внешнего CSS

.something input {
  color: white;
}

quantuminformation 20 дек. 2017

👎21 👍2 😕1

@QuantumInformation Я рад, что вы нашли решение. Я бы посоветовал людям сделать это так:

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

oliviertassinari 20 дек. 2017

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

Не работает в "@material-ui/core"

sandy0096 13 июн. 2018

👍32 😕1 😄1 👎1

Есть обновления, как заставить его работать с @material-ui/core ? Я сильно застрял в этом

pankajparkar 6 дек. 2018

@pankajparkar Я обновил свой предыдущий ответ, чтобы работать с последней версией: https://github.com/mui-org/material-ui/issues/9574#issuecomment -353179532. Я надеюсь, что это поможет, дайте мне знать! В качестве альтернативы у нас есть демонстрация настройки в https://material-ui.com/demos/text-fields/#customized -inputs.

oliviertassinari 6 дек. 2018

@oliviertassinari большое спасибо. Мне пришлось удалить label чтобы он заработал.
Есть ли у вас какое-либо решение / обходной путь, чтобы заставить его работать с меткой. Я понимаю, почему метка накладывается (я как бы частично отсортировал ее, применив z-index , но это привело к другим проблемам).

Код проблемы

pankajparkar 7 дек. 2018

большое тебе спасибо

vaydi 8 окт. 2019

Черт, никогда не понимал, насколько непопулярным был мой первоначальный ответ

quantuminformation 8 окт. 2019

@oliviertassinari большое спасибо. Мне пришлось удалить label чтобы он заработал.
Есть ли у вас какое-либо решение / обходной путь, чтобы заставить его работать с меткой. Я понимаю, почему метка накладывается (я как бы частично отсортировал ее, применив z-index , но это привело к другим проблемам).
Код проблемы

Мне тоже нужно точно такое же!