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

我正在尝试将我的整个材质UI文本字段标记设置为白色。标签和边框，无论是离焦还是对焦

对焦全是白色的，但我不能把离焦变成白色。我在dev工具中看到它，但它必须不够具体。我甚至试过！重要的是，但这仍然没有优先于原始颜色

我已经尝试了大约六种方法，但只能够将注意力集中到工作上。不知道我做错了什么

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

从“React”导入React；
从'@material ui/styles'导入{withStyles}；
从“@material ui/core/TextField”导入TextField；
常量样式=主题=>({
事件包装：{
宽度：“90%”，
边距：“0自动”，
“$eventInput”：{
颜色：'白色'，
},
},
事件说明：{
fontSize:'25px'，
marginBottom:'50px'，
},
根目录：{
颜色：“白色！重要”，
边框颜色：“白色！重要”，
},
输入：{
颜色：“白色！重要”，
边框颜色：“白色！重要”，
}
});
const CssTextField=带样式({
根目录：{
“&label.Mui聚焦”：{
颜色：'白色'，
},
'&.MuiInput下划线：在''{
边框底部颜色：“白色”，
},
},
})（文本字段）；
类事件扩展了React.Component{
下一节=（）=>{
如果（this.props.event！=''）{
this.props.nextSection（‘情感’）
}否则{
警报（'您必须在情况或事件中写入'）
}
}
render（）{
const{classes}=this.props；
返回(
写出一个让你感到焦虑的事件或情况。保持它的真实性，忽略所有关于它的感觉
this.props.updateEvent（e.target.value）}
占位符=“事件/情况”
全宽
className={classes.root}
InputProps={{className:classes.input}
color=“primary”
/>
this.nextSection（）}>Next
)
}
}
导出默认样式（样式）（事件）；

你能在开发工具上发布UI截图和样式吗？你能在开发工具上发布UI截图和样式吗？