MUI v5+React Styleguidist下ScopedCssBaseline fontSize配置不生效问题

问题核心原因 #

你的配置错误主要有两个点：

• 主题配置的组件key和实际使用的组件不匹配：你配置的是MuiCssBaseline的样式覆盖，但实际渲染用的是<ScopedCssBaseline />组件，这是两个独立的MUI组件，后者对应的主题配置key为MuiScopedCssBaseline
• 样式覆盖的目标节点错误：<CssBaseline />是全局重置组件，所以可以直接配置body选择器的样式，而<ScopedCssBaseline />是局部作用域的容器组件，所有样式都会挂载到自身的根DOM节点上，因此样式覆盖的key需要从body改为root

修正后的完整代码 #

const appTheme = createTheme(
    {
        components: {
            MuiScopedCssBaseline: { // 替换原MuiCssBaseline
                styleOverrides: {
                    root: { // 替换原body
                        fontSize: '0.875rem', // 恢复为MUI v4中typography body2的字号
                        lineHeight: 1.43,
                        letterSpacing: '0.01071em',
                    },
                },
            },
        },
        palette: {
            mode: 'light',
            primary: { main: '#009999' },
            secondary: { main: '#ffc400' },
        },
    })

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

补充说明 #

该配置仅会修改组件示例区域的字号，不会污染Styleguidist本身的界面样式，符合场景需求。如果你需要修改全局body的字号，可以将<ScopedCssBaseline />替换为全局的<CssBaseline />，保留原来的MuiCssBaseline配置即可，若出现样式被Styleguidist默认样式覆盖的情况，可以给对应样式添加!important提升优先级。

内容的提问来源于stack exchange，提问作者TheDiveO