When DepartmentSelect is focused label and bottom line disappear

[davidfdriscoll]

Unfocused:

Focused:

When focused the label receives the color theme.palette.primary.main, which fades into background.

[davidfdriscoll]

It would be better for it to receive the color theme.palette.primary.dark, as in this demo.

[davidfdriscoll]

Instead switched to secondary palette, but in general these are helpful for targeting pseudoclasses:

https://medium.com/the-clever-dev/override-textfield-border-color-for-different-states-in-material-ui-2b61590d89ab
mui/material-ui#11244

I found this worked:

const useStyles = makeStyles((theme) => ({
root: {
'&$focused': {
color: theme.palette.primary.dark,
},
},
focused: {},
}));

...

<InputLabel
id="select-label"
classes={{
root: classes.root,
focused: classes.focused,
}}