Migration v4 to v5 Breaks Styling of Basic MUI Components

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.