如何覆盖 Mui5 主题中的组件样式？答案

【问题标题】：How to override component styles within Mui5 theme?如何覆盖 Mui5 主题中的组件样式？
【发布时间】：2021-11-25 15:33:45
【问题描述】：

我正在从 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”属性被添加到我的 Typography 组件中。但是 styleOverrides 中的所有内容似乎都被删除了。此外，添加到 theme.palette 的颜色有效，但 theme.typography.h2 也不会改变任何样式。我对其他组件有相同的逻辑，但它似乎不起作用。

按照Styles broken after migrating to v5 中的说明，我确保 StyledEngineProvider 位于组件树的顶部，并从应用程序中删除了 @material-ui/core (Mui4) 的任何痕迹。

【问题讨论】：

把你的对象放在components属性里面：{ components: { MuiTypography: {...} } }
我的错，我没有将它正确复制到 SO，我将编辑我的问题。谢谢
在codesandbox 中不可重现。您可以添加您的导入代码吗？
哦！感谢您的 codesanbox，我了解到有些软件包丢失了，谢谢！

标签： reactjs material-ui

【解决方案1】：

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

您必须安装以下内容：

npm install @emotion/react @emotion/styled

【讨论】：