How do I override styles using dollar sign ($) in MUI 5? - reactjs

Question

The code below is from MUI 5, with a MUI 4 solution for change input field when hovering. But it obviously doesn't work, wonder how to achieve this in MUI 5, can't
seem to change the color from the TextField upon hovering. This is done using createTheme in MUI 5
components: {
MuiInputLabel: {
styleOverrides: {
root: {
color: arcBlue,
fontSize: '1rem',
},
},
},
MuiInput: {
styleOverrides: {
underline: {
'&:before': {
borderBottom: `2px solid ${arcBlue}`,
},
// Code from material ui 4
'&:hover:not($disabled):not($focused):not($error):before': {
borderBottom: `2px solid ${arcGrey}`,
},
},
},
},
},

Answer 1

The $ syntax is a feature from JSS, in MUI v5, they switch to emotion so it doesn't work anymore, you have 2 options now:
Use plain string
From this section, you can see a list of class names that describe different MUI component states:
State
Global class name
active
.Mui-active
checked
.Mui-checked
completed
.Mui-completed
disabled
.Mui-disabled
error
.Mui-error
expanded
.Mui-expanded
focus visible
.Mui-focusVisible
focused
.Mui-focused
required
.Mui-required
selected
.Mui-selected
'&&:hover:not(.Mui-disabled):not(.Mui-error):before': {
borderBottom: `5px solid purple`
}
Use constant
Most MUI components have their own class constants if you don't want to hardcode the class name:
import { [component]Classes } from "#mui/material/[Component]";
import { inputClasses } from "#mui/material/Input";
[`&&:hover:not(${inputClasses.disabled}):not(${inputClasses.focused}):before`]: {
borderBottom: `5px solid purple`
}
Reference
https://mui.com/guides/migration-v4/#migrate-themes-styleoverrides-to-emotion