Migration v4 to v5 Breaks Styling of Basic MUI Components - reactjs

Question

I am upgrading from v4 to v5 and having significant problems that are inconsistent.
The <Button> component looks as it should on the Login page, but once logged in, the <Button> components look like they don't have any MUI styling, such as padding and color. I am thinking it has something to do with the themes because some files complain about theme.spacing while others do not.
I have no idea what I am doing wrong.
App.tsx
const theme = createTheme(
adaptV4Theme({
palette: {
primary: {
light: '#e57373',
main: '#d32f2f',
dark: '#d32f2f',
contrastText: '#fff',
},
secondary: {
light: '#9adcfb',
main: '#03a9f4',
dark: '#0288d1',
contrastText: '#fff',
},
},
}),
);
const LoggedInRouter = lazy(() => import('./routers/LoggedInRouter'));
const App: React.FC = () => {
return (
<StyledEngineProvider injectFirst>
<ThemeProvider theme={theme}>
<IonApp>
<IonReactRouter>
<Suspense fallback={<Loading />}>
<IonRouterOutlet>
<Switch>
<Route path="/login" component={Login} />
<Route path="/user" component={LoggedInRouter} />
<Route path="/" render={() => <Redirect to="/login" />} />
</Switch>
</IonRouterOutlet>
</Suspense>
</IonReactRouter>
</IonApp>
</ThemeProvider>
</StyledEngineProvider>
);
};
Login.tsx (Button looks as it should if compilation error theme.spacing is commented out)
/login
const useStyles = makeStyles(theme => ({
root: {
height: '100vh',
},
paper: {
height: '75vh',
margin: theme.spacing(8, 4),
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
},
logo: {
maxWidth: '100%',
},
}));
const Login = (): ReactElement => {
const classes = useStyles();
return (
<>
<Grid container className={classes.root}>
<Grid item sm={6} component={Paper} elevation={6} square>
<div className={classes.paper}>
<Paper elevation={3}>
<div className={classes.paper}>
<Typography variant="h5">Log In To Your Account</Typography>
<p></p>
<div className={classes.root}>
<Button
type="button"
fullWidth
variant="contained"
color="primary"
disabled
>
Create Account
</Button>
</div>
</div>
</Paper>
</div>
</Grid>
</Grid>
</>
);
};
Settings.tsx (Buttons and other basic MUI components don't have any expected styling as shown in docs)
/user/settings
const useStyles = makeStyles(theme => ({
margin: {
margin: theme.spacing(3),
},
padding: {
padding: theme.spacing(3),
},
connectionCard: {
width: '100%',
},
}),
);
const Settings = (): ReactElement => {
const classes = useStyles();
const [value, setValue] = React.useState(0);
return (
<>
<Paper className={classes.margin} elevation={3}>
<Grid container spacing={2} className={classes.padding}>
<Grid item md={4}>
<Card className={classes.connectionCard} raised={true}>
<CardContent>
<Typography variant="body1" component="p">
Test
</Typography>
</CardContent>
<CardActions>
<Button variant="contained" color="secondary">
Connect
</Button>
</CardActions>
</Card>
</Grid>
</Grid>
</Paper>
</>
);
};

Answer 1

https://mui.com/guides/migration-v4/#styles-broken-after-migrating-to-v5
When initially looking, I did not see this very last thing in the troubleshooting section. Maybe it was added recently, or I just missed it.