如何更改Material-UI的label颜色<textfield />

Question

How can I change the color from "email" label and make it the same as the border line?

Here's my code:

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

Answer 1

Below is one way to control the focused color of the input label to be the same as the focused color of the border:

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

Answer 2

Try using this CSS code in your CSS file to change its border color:

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

}

and to change its label you can use the following inline style in your <TextField/> :

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

This method should work if you still can't change it, You can also try changing its color by inspecting it from the browser.

Answer 3

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

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

Answer 4

try this: put in the TextField

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