如何在Mui5主题中覆盖组件样式？

Question

我正在从Mui4升级到5的过程中。

升级后，我的索引文件看起来像这样(注意我使用的是JSS，因此使用了StyledEngineProvider)：

function renderApp() {
  ReactDOM.render(
      <StyledEngineProvider injectFirst>
        <ThemeProvider theme={theme}>
          <CssBaseline />
          <Typography variant="h2" component="h2">H2 TEST</Typography>
          ...
        </ThemeProvider>
      </StyledEngineProvider>,
    document.getElementById('root'),
  );
}

我的主题是：

createTheme({
  components: {
    MuiTypography: {
      defaultProps: {
        title: 'test h2 title',
      },
      styleOverrides: {
        root: {
          fontSize: '10px',
          fontWeight: 500,
        },
      },
    },
  },
});

我可以看到我的主题被用作"title“属性被添加到我的排版组件中。但styleOverrides内部的一切似乎都被丢弃了。此外，添加到theme.palette中的颜色可以正常工作，但theme.typography.h2也不会更改任何样式。我对其他组件也有相同的逻辑，但它似乎不起作用。

正如在Styles broken after migrating to v5中指定的那样，我确保StyledEngineProvider位于组件树的顶部，并从应用程序中删除了@material-ui/core (Mui4)的任何痕迹。

Answer 1

在migration doc之后，即使您在应用程序中使用JSS而不是emotion，也不清楚以下包是否是强制性的。请注意，没有任何警告，例如主题配置中的情感样式将不会被编译。

您必须安装以下软件：

npm install @emotion/react @emotion/styled