从 v4 到 v5 的迁移破坏了基本 MUI 组件的样式

Question

我正在从 v4 升级到 v5，但遇到不一致的重大问题。

<Button> 组件在登录页面上看起来应该如此，但一旦登录，<Button> 组件看起来没有任何 MUI 样式，例如填充和颜色。我认为这与主题有关，因为有些文件抱怨 theme.spacing 而其他人则没有。

我不知道我做错了什么。

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（如果编译错误 theme.spacing 被注释掉，按钮看起来应该是正常的）

/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（按钮和其他基本 MUI 组件没有任何预期的样式，如文档中所示）

/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

最初查看时，我没有在故障排除部分看到最后这一点。可能是最近加的，也可能是我错过了。

从 v4 到 v5 的迁移破坏了基本 MUI 组件的样式

Migration v4 to v5 Breaks Styling of Basic MUI Components

reactjs

material-ui