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

Question

我正在尝试将我的整个材质 UI TextField 标记设为白色。标签和边框，无论是焦点还是焦点。

焦点全是白色的，但我无法让离焦为白色。我在开发工具中看到它，但它一定不够具体。我什至尝试过 !important，但它仍然没有优先于原始颜色。

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

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

Answer 1

const WhiteTextField = withStyles({
  root: {
    '& .MuiInputBase-input': {
      color: '#fff', // Text color
    },
    '& .MuiInput-underline:before': {
      borderBottomColor: '#fff8', // Semi-transparent underline
    },
    '& .MuiInput-underline:hover:before': {
      borderBottomColor: '#fff', // Solid underline on hover
    },
    '& .MuiInput-underline:after': {
      borderBottomColor: '#fff', // Solid underline on focus
    },
  },
})(TextField);