Material UI TextField Style Override Using Theme - reactjs

Question

I have a TextField: https://mui.com/components/text-fields/
<TextField
fullWidth
type={'email'}
variant={'standard'}
label={'Email'}/>
My background is dark so I'm trying to override the default colours using my theme. I have been able to change the text color and the bottom border when in focus to white but I cannot figure out how to change the bottom border to white when out of focus.
Not in focus:
In Focus:
Here is what my theme looks like:
const lightTheme: ThemeOptions = createTheme({
palette: {
primary: {
main: '#ffffff',
},
},
typography: {
allVariants: {
color: 'white'
},
},
components: {
MuiInputBase: {
styleOverrides: {
input: {
color: 'white',
}
}
}
}
});
I'm also having a hard time finding documentation on which styles are available and what they do in the Material UI docs. Perhaps in addition to helping me solve this particular problem someone can point me to a good spot in the docs for references whenever I want to change the styles on any Material UI component.

Answer 1

If you inspect and check the style through the browser, then you will realize the border bottom is applied for the ::before pseudo element MuiInput-root class.
Like I said, I guess it will work if you pass the same to the pseudo element into your theme.
const lightTheme: ThemeOptions = createTheme({
palette: {
primary: {
main: '#ffffff',
},
},
typography: {
allVariants: {
color: 'white'
},
},
components: {
MuiInputBase: {
styleOverrides: {
input: {
color: 'white',
'&::before': {
border-bottom: 1px solid rgba(0, 0, 0, 0.42); // use your color
}
}
}
}
}
});