无法覆盖表单文本字段焦点下划线inmaterialUI css

Question

我一直在尝试覆盖materialUI中的文本字段，特别是焦点下划线，我尝试使用materialUI类方法未成功。有任何解决方法吗？

我尝试了materialUI类方法来覆盖。

import React, { Component } from "react";


const updateByPropertyName = (propertyName, value) => () => ({
  [propertyName]: value
});

const INITIAL_STATE = {
  username: "",
  email: "",
  passwordOne: "",
  passwordTwo: "",
  error: null
};

  render() {
    const { username, email, passwordOne, passwordTwo, error } = this.state;

    const isInvalid =
      passwordOne !== passwordTwo ||
      passwordOne === "" ||
      username === "" ||
      email === "";

    return (
    <div className="register">
     <div className="row">
      <div className="col s7 m7 l7 SignUp">
          <div className="logo"><img src={logo} alt='Logo' style={{ width: "19%" }} /></div>
            <div className="col s12">
              <h4 className="title">
                Sign Up
              </h4>
              <p className="grey-text">Use your email account for registration</p>
            </div>
         <form onSubmit={this.onSubmit}>
            <div>
              <TextField
                id="username"
                label="Name"
                className="textField"
                margin="normal"
                value={username}
                onChange={event =>
                  this.setState(
                    updateByPropertyName("username", event.target.value)
                  )
                }
              />
            </div>
            <div>
              <TextField
                id="email"
                label="Email Address"
                className="textField"
                margin="normal"
                value={email}
                onChange={event =>
                  this.setState(
                    updateByPropertyName("email", event.target.value)
                  )
                }
              />
            </div>
            <div>
              <TextField
                id="passwordOne"
                label="Password"
                type="password"
                className="textField"
                autoComplete="current-password"
                margin="normal"
                value={passwordOne}
                onChange={event =>
                  this.setState(
                    updateByPropertyName("passwordOne", event.target.value)
                  )
                }
              />
            </div>
            <div>
              <TextField
                id="passwordtwo"
                label="Password"
                type="password"
                className="textField"
                autoComplete="current-password"
                margin="normal"
                value={passwordTwo}
                onChange={event =>
                  this.setState(
                    updateByPropertyName("passwordTwo", event.target.value)
                  )
                }
              />
            </div>
            <Privacy />
            <div>
              <br />
              <Button
                variant="raised"
                color="default"
                size="large"
                disabled={isInvalid}
                className="submit"
                type="submit"
              >
                Sign Up
              </Button>
            </div>
            <div className="error">{error && error.message}</div>
                      <SignInLink />
          </form>
      </div>
         <div className="col m5 s5 l5 responsive-img hide-on-small-only" style={{  
            backgroundImage: "url(" + background + ")",
            backgroundPosition: 'center',
            backgroundSize: 'cover',
            backgroundRepeat: 'no-repeat',
            minHeight: '808px',
           }}>
                <div className="centered center-align"  style={{ margin: "auto" , width: "450px" , height: "100px", color: "white" , marginTop: "300px" , textAlign: "center" }}>
                <h3>Create an account</h3>
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua</p>
              </div>
           </div>
           </div>
           </div>
    );
  }
}

我主要要覆盖textfield下划线的焦点颜色，但是找到一种可以让我更改表单其他组件的方法将非常有用。