css - 如何更改 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);

Answer 1

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

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