Material-UI Input component underline color

I took a look at the source code and they are doing something like this

{
   focused: {},
   disabled: {},
   error: {},
   underline: {
    '&:before': {
        borderBottom: '1px solid rgba(255, 133, 51, 0.42)'
    },
    '&:after': {
        borderBottom: `2px solid ${theme.palette.secondary.main}`
    },
    '&:hover:not($disabled):not($focused):not($error):before': {
        borderBottom: `2px solid ${theme.palette.secondary.main}`
    }
}

It works for me.

Inspired by Guillaume's answer, here is my working code, simplified if you don't care about error state:

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

Use:

<WhiteTextField
  fullWidth
  onChange={this.handleNameChange}
  value={this.props.name}
/>