Material-UI v5 override MuiSwitch input - reactjs

Question

I need to use Switch component from MUI v5 in a website with third party CSS that apply relative position to checkboxes and radios.
In v4 I was able to change this behaviour with an override:
overrides: {
MuiSwitch: {
input: { position: 'absolute !important' },
}
}
This was enough to set position to absolute.
Following the example provided by official documentation in order to migrate to v5 I changed the above snippet in:
components:{
MuiSwitch: {
styleOverrides: {
input: {
position: "absolute !important"
}
}
}
}
But MuiSwitch-input still has position relative.
Please take a look at this demo.
The only solution I found was to put style in CSS:
.MuiSwitch-input {
position: absolute !important;
}

Answer 1

I'm not sure why your code didn't work, but I've found a workaround by specifying the switch input className directly like this:
import Switch, { switchClasses } from "#mui/material/Switch";
import { createTheme, ThemeProvider } from "#mui/material/styles";
const theme = createTheme({
components: {
MuiSwitch: {
styleOverrides: {
root: {
[`& .${switchClasses.input}`]: {
position: "absolute"
}
},
switchBase: {
color: "red"
}
}
}
}
});
Live Demo