如何更改Material-UI <TextField/>标签颜色

Question

如何将“电子邮件”标签的颜色更改为与边框线相同？

下面是我的代码：

import React, { Component } from "react";
import { Icon } from "semantic-ui-react";
import { Divider } from "semantic-ui-react";
import { TextField, Button, Grid } from "@material-ui/core";
import PropTypes from "prop-types";
import classNames from "classnames";
import { withStyles } from "@material-ui/core/styles";

let self;

const styles = theme => ({
  container: {
    display: "flex",
    flexWrap: "wrap"
  },
  textField: {
    marginLeft: theme.spacing.unit,
    marginRight: theme.spacing.unit,
    width: 280
  },
  cssLabel: {
    color: "#d3d3d3"
  },
  cssOutlinedInput: {
    "&:not(hover):not($disabled):not($cssFocused):not($error) $notchedOutline": {
      borderColor: "#d3d3d3" //default
    },
    "&:hover:not($disabled):not($cssFocused):not($error) $notchedOutline": {
      borderColor: "#d3d3d3" //hovered #DCDCDC
    },
    "&$cssFocused $notchedOutline": {
      borderColor: "#23A5EB" //focused
    }
  },
  cssInputLabel: {
    color: "#d3d3d3"
  },
  notchedOutline: {},
  cssFocused: {},
  error: {},
  disabled: {}
});
class NewLoginComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loggedIn: false,
      user: "",
      errorMsg: "",
      errorMsgLength: "",
      loginErrorMsg: "",
      flag: false,
      password: "",
      hidden: true,
      valuePassText: "SHOW"
    };
    self = this;
  }

  componentDidMount() {
    this._isMounted = true;
    if (this.props.password) {
      this.setState({ password: this.props.password });
    }
  }

  componentDidUpdate(prevProps) {}

  render() {
    const { classes } = this.props;
    let username = "";
    let password = "";
    return (
      <div className="container-fluid backround">
        <div className="container" id="loginform">
          <div className="form-group">
            <div>
              <div className="emailInput">
                <TextField
                  className={classes.textField}
                  id="email-txt-input"
                  label="Email"
                  variant="outlined"
                  inputRef={node => (username = node)}
                  InputLabelProps={{
                    classes: {
                      root: classes.cssLabel,
                      focused: classes.cssFocused
                    }
                  }}
                  InputProps={{
                    classes: {
                      root: classes.cssOutlinedInput,
                      focused: classes.cssFocused,
                      notchedOutline: classes.notchedOutline
                    },
                    inputMode: "numeric"
                  }}
                />
              </div>
              <div className="passwordInput">
                <TextField
                  className={classes.textField}
                  id="password-txt-input"
                  label="Password"
                  variant="outlined"
                  inputRef={node => (password = node)}
                  type={this.state.hidden ? "password" : "text"}
                  value={this.state.password}
                  onChange={this.handlePasswordChange}
                  InputLabelProps={{
                    classes: {
                      root: classes.cssLabel,
                      focused: classes.cssFocused
                    }
                  }}
                  InputProps={{
                    classes: {
                      root: classes.cssOutlinedInput,
                      focused: classes.cssFocused,
                      notchedOutline: classes.notchedOutline
                    },
                    inputMode: "numeric"
                  }}
                />
              </div>
            </div>
            <div className="form-group form">
              <Button
                variant="contained"
                id="normal-signin-Btn"
                type={"submit"}
                className={"btn btn-primary loginButton"}
              >
                LogIn
              </Button>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

NewLoginComponent.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(NewLoginComponent);

- Petros Karkanis

---

我猜你正在使用 https://material-ui.com/components/text-fields/#textfield ？.MuiInputLabel-formControl.Mui-focused { color: 你的边框颜色 } - Someone

是的，我想要改变默认颜色。现在默认颜色是蓝色。 - Petros Karkanis

不是因为我正在使用一种不同的方法来在材料组件中添加自定义CSS。 - Petros Karkanis

是的，你说得对@RyanCogswell。我已经在主问题中添加了代码沙盒。非常感谢。 - Petros Karkanis

请查看以下代码示例：MeterialUiExample。 - Petros Karkanis

Answer 1

以下是一种控制输入标签焦点颜色与边框焦点颜色相同的方法：

  cssLabel: {
    color: "#d3d3d3",
    "&.Mui-focused": {
      color: "#23A5EB"
    }
  },

- Ryan Cogswell

Answer 2

您可以在TextField组件中使用InputLabelProps，例如：

<TextField InputLabelProps={{style : {color : 'green'} }}></TextField>

- user12179366

Answer 3

尝试这个：将其放入文本字段中。

sx={{
        "& label": {
          "&.Mui-focused": {
            color: 'your color*'
          }
        }
      }}

- hugo gabriel Goncalvez

---

我在我的代码中像这样使用了您的解决方案： ( { return { "& label": { "&.Mui-focused": { color: theme.palette.common.white, } } }; }} /> )} /> - James F. Thomas

Answer 4

尝试在CSS文件中使用以下CSS代码来更改其边框颜色：

.css-1d3z3hw-MuiOutlinedInput-notchedOutline{
color: yellow !important;
border: 2px solid yellow !important;

你可以使用以下内联样式来更改 <TextField/> 的标签：

}

InputLabelProps={{style : {color : 'yellow'} }}

如果您仍然无法更改它，可以尝试通过浏览器检查来更改其颜色，这种方法应该有效。

- Rafia Zafar