如何覆盖浮动标签文本的TextField并在材质-ui-next中加下划线颜色？

Question

我坚持使用className，inputProps和InputLabelProps更改浮动标签文本的颜色和取消，但颜色根本没有变化。它适用于我使用主题设置托盘主要颜色，但我想改变组件级别的颜色。

我跟随所有工作演示given here。以下是我到目前为止所尝试的但颜色没有变化

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，如下面的示例所示。

最后，您已经创建了一个函数无状态组件，它调用state，这自然无法工作。

假设您的示例代码已完成，则需要修复这三个错误。

我已经制作了一个使用硬编码值而不是状态的示例，如果您希望将其更改为有状态组件，可以根据需要进行交换：

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"));