MUI v5 + React styleguidist + ScopedCSSBaseline + createTheme styleOverrides：body fontSize 更改不起作用

Question

我已经将两个 MUI 支持的 UI 从 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>
  );

但是，这并没有将预期的字体大小设置为 14px，而是设置为 16px。我做错了什么，在这种情况下 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' },
        },
    })

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

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