MaterialUI - Changing the color Textfield on focus - reactjs

Question

I'm trying to change the color of the label text in Textfield but I can't seem to figure it out.
Here is what I'm trying:
<TextField
value={value}
key={name}
label={label}
id={id}
name={name}
InputLabelProps={{
shrink: true,
FormLabelClasses: {
'root': {
'&:focused': {
color: 'white'
}
},
focused: 'true'
}
}}
/>
Can someone give me a pointer on what I'm doing wrong here?
I've also tried using the MuiThemeProvider but can't seem to figure that one out either:
const theme = createMuiTheme({
overrides: {
MuiFormLabel: {
focused: true,
root: {
'&.focused': {
color: 'white'
}
}
}
}
});
How can I change the color of the Label? In this photo, I want the "Notes" to match the color of the underline
Thanks for your help!

Answer 1

Tim!
Here is the snippet that should help you.
const {
TextField,
createMuiTheme,
MuiThemeProvider,
CssBaseline,
} = window['material-ui'];
const theme = createMuiTheme({
overrides: {
MuiFormLabel: {
root: {
"&$focused": {
color: "tomato",
fontWeight: "bold"
}
},
focused: {}
}
}
});
class Index extends React.Component {
render() {
return (
<MuiThemeProvider theme={theme}>
<div>
<CssBaseline />
<TextField label="Text field" InputLabelProps={{shrink:true}} />
</div>
</MuiThemeProvider>
);
}
}
ReactDOM.render(<Index />, document.getElementById('root'));
<script src="https://unpkg.com/react#latest/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom#latest/umd/react-dom.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/#material-ui/core/umd/material-ui.development.js" crossorigin="anonymous"></script>
<div id="root"></div>

Answer 2

Another way of doing it without the override is to have:
const textStyles = makeStyles({
root: {
"& .Mui-focused": {
color: "tomato",
fontWeight: "bold"
},
});
class Index extends React.Component {
const TextClass = textStyles()
render() {
return (
<MuiThemeProvider theme={theme}>
<div>
<CssBaseline />
<TextField className={textStyles.root} label="Text field" InputLabelProps={{shrink:true}} />
</div>
</MuiThemeProvider>
);
}
}

Answer 3

for v5 of #mui this code works
const theme = createTheme({
components: {
MuiInputLabel: {
styleOverrides: {
root: {
fontWeight: 'bold',
"&.Mui-focused": {
color: 'rgba(0, 0, 0, 0.87)',
},
},
}
},
MuiTextField: {
defaultProps: {
variant: 'standard',
},
},
},