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的参数提供，如下面的示例中所示。

最后，您已经创建了一个调用状态的功能性无状态组件，该组件自然无法工作。

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

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

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

如何在material-ui-next中覆盖浮动标签文本的TextField和下划线颜色？

1 个答案: