如何使TextField材质UI组件以白色文本和下划线开头

Question

我正在尝试将整个材料UI TextField标签设置为白色。标签和边框，既不聚焦又聚焦。

焦点对准全是白色，但是我不能使焦点对准全是白色。我在开发工具中看到了它，但是它一定不够具体。我什至尝试过！重要，但这仍然没有比原始颜色优先。

我已经尝试了大约六种方法，但只能集中精力进行工作。不知道我在做什么错。

import React from 'react';
import { withStyles } from '@material-ui/styles';
import TextField from '@material-ui/core/TextField';

const styles = theme => ({
    eventWrap: {
        width: '90%',
        margin: '0 auto',
        '$ eventInput': {
            color: 'white',
        },
    },
    eventExplaination: {
        fontSize: '25px',
        marginBottom: '50px',
    },
    root: {
        color: "white !important",
        borderColor: 'white !important',
      },
    input: {
        color: "white !important",
        borderColor: 'white !important',
      }
});

const CssTextField = withStyles({
    root: {
        '& label.Mui-focused': {
            color: 'white',
        },
        '& .MuiInput-underline:after': {
            borderBottomColor: 'white',
        },
    },
  })(TextField);

class Event extends React.Component {

    nextSection = () => {
        if(this.props.event !== '') {
            this.props.nextSection( 'emotions' )
        } else {
            alert('you must write in a situation or event')
        }
    }

    render() {
        const { classes } = this.props;
        return(
            <div className={classes.eventWrap}>
                <p className={classes.eventExplaination}>Write out an event or situation that made you feel anxious. Keep it factual, leave out all feelings about it.</p>
                <CssTextField
                    id="custom-css-standard-input"
                    label="Type in Event/Situation"
                    value={this.props.event}
                    onChange={(e) => this.props.updateEvent( e.target.value )}
                    placeholder="Event/Situation"
                    fullWidth
                    className={classes.root}
                    InputProps={{ className: classes.input }}
                    color="primary"
                />
                <button onClick={() => this.nextSection()}>Next</button>
            </div>
        )
    }
}

export default withStyles(styles)(Event);