MUI v5 + React styleguidist + ScopedCSSBaseline + createTheme styleOverrides: body fontSize change not working

Question

我已将两个基于 MUI 的 UI vom MUI v4 迁移到 v5，它们的 body fontSize 均被覆盖，如 MUI 迁移指南中所述：这是为了保持 v4 设计决策默认为 Typography body2 字体大小。这按预期工作。

现在我还想在我的 Styleguidist 组件样式指南中确保正确的 MUI v4 字体大小默认值。我创建了一个MuiThemeWrapper 并连接到styleguide.config.js：

styleguideComponents: {
    Wrapper: path.join(__dirname, 'styleguidist/MuiThemeWrapper.tsx')
},

包装器基本上是这样做的：

const appTheme = createTheme(
    {
        components: {
            MuiCssBaseline: {
                styleOverrides: {
                    body: {
                        fontSize: '0.875rem', // ...go back to typography body2 font size as in MUI v4.
                        lineHeight: 1.43,
                        letterSpacing: '0.01071em',
                    },
                },
            },
        },
        palette: {
            mode: 'light',
            primary: { main: '#009999' },
            secondary: { main: '#ffc400' },
        },
    })

return (
    <ThemeProvider theme={appTheme}>
        <ScopedCssBaseline>
            {children}
        </ScopedCssBaseline>
    </ThemeProvider>
  );

但是，这并没有将预期的字体大小设置为 14 像素，而是设置为 16 像素。我做错了什么，这种情况下的 body styleOverride 是否正确？

Answer 1

在对ScopedCssBaseline.js 进行了更深入的研究之后，我终于想到，在使用createTheme() 时，实际上MuiScopedCssBaseline 被定义为有效的components 成员。需要为元素 root 指定 styleOverrides 而不是 body。

即：

const appTheme = createTheme(
    {
        components: {
            MuiScopedCssBaseline: {
                styleOverrides: {
                    root: {
                        fontSize: '0.875rem', // ...go back to typography body2 font size as in MUI v4.
                        lineHeight: 1.43,
                        letterSpacing: '0.01071em',
                    },
                },
            },
        },
        palette: {
            mode: 'light',
            primary: { main: '#009999' },
            secondary: { main: '#ffc400' },
        },
    })

更新后的代码框示例现在可以按预期工作。

这也更新了答案Setup react-styleguidist, Create React App, Typescript, Material UI and styled-components 并使其与 MUI v5 保持同步。