Как переопределить TextField плавающего текста метки и подчеркнуть цвет в материале-UI-следующий?

Question

Я застрял с изменением цвета плавающего текста надписи и отмены, используя className, inputProps и InputLabelProps, но цвет не меняется вообще. Это работает, когда я устанавливаю основной цвет поддона с помощью темы, но я хотел изменить цвет на уровне компонента.

Я следовал всем рабочим демонстрациям , приведенным здесь . Вот то, что я пробовал до сих пор, но цвет не меняется

import React from "react";
import {
  TextField
} from "@material-ui/core";

const TextField = props => {
  const styles = theme => ({
    textField: {
      color: "red !important"
    },
    input: {
      color: "white !important"
    }
  });
  return (
    <div>
            <TextField
              id="fName"
              label="First Name"
              className={classes.textField}
              inputProps={{
                className: classes.input
              }}
              InputLabelProps={{
                className: classes.input
              }}
              value={this.state.firstName}
              onChange={this.handleFirstname('fName')}
              margin="normal"
            />
    </div>
  );
};

Я не понимаю, что я делаю неправильно.

Answer 1

Ну, для начала, вы смешиваете использование здесь, и вы дублировали имя вашего компонента с предоставленным компонентом из material-ui.

Вы назвали свой новый компонент TextField, который идентичен компоненту, предоставленному material-ui - в их примере ожидается, что TextField будет иметь имя TextFields (множественное число)

Кроме того, вы вызвали код, который ожидает импорта withStyles, и вызвали ваш компонент, чтобы сделать его HOC, который затем предоставил бы объект props.classes, ожидаемый вашим кодом (возможно, это учтено в вашем коде и ваш пример просто не включил его) - и стили должны создаваться вне компонента, к которому вы применяете его, чтобы вы могли предоставить его в качестве параметра withStyles, как вы увидите в моем примере ниже.

И, наконец, вы создали функциональный компонент без состояния, который вызывает состояние, которое, естественно, не может работать.

Если ваш пример кода завершен, эти три ошибки необходимо исправить.

Я создал пример, который работает с жестко запрограммированными значениями вместо состояния, которое можно при необходимости поменять местами, если вы хотите изменить его на компонент с состоянием:

import React from "react";
import ReactDOM from "react-dom";
import { TextField } from "@material-ui/core";
import { withStyles } from "@material-ui/core/styles";

const styles = theme => ({
  textField: {
    color: "red !important"
  },
  input: {
    color: "black !important"
  }
});

const TextFields = withStyles(styles)(props => {
  return (
    <div>
      <TextField
        id="fName"
        label="First Name"
        className={props.classes.textField}
        inputProps={{
          className: props.classes.textField
        }}
        InputLabelProps={{
          className: props.classes.input
        }}
        value="Hello!"
        //onChange={this.handleFirstname('fName')}
        margin="normal"
      />
    </div>
  );
});

const rootElement = document.getElementById("root");
ReactDOM.render(<TextFields />, document.getElementById("root"));