0

I've migrated two MUI-powered UIs vom MUI v4 to v5, which both have their body fontSize overriden, as explained in the MUI migration guide: this is to keep the v4 design decision to default to Typography body2 font size. This works as expected.

Now I would like to also ensure proper MUI v4 font size default in my Styleguidist component style guide. I've created a MuiThemeWrapper and wired up in styleguide.config.js:

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

The wrapper basically does this:

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>
  );

However, this does not set the expected font size to 14px, but instead to 16px. What am I doing wrong, is the body styleOverride in this case even correct?

Edit styleguidist-mui-example

TheDiveO
  • 2,183
  • 2
  • 19
  • 38

1 Answers1

1

After nosing around even more in ScopedCssBaseline.js, it finally occurred to me that there is in fact the MuiScopedCssBaseline defined as a valid components member when using createTheme(). Instead of body it's necessary to specify the styleOverrides for element root.

That is:

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' },
        },
    })

The updated codesandbox example now works as expected.

This also updates the answer Setup react-styleguidist, Create React App, Typescript, Material UI and styled-components and brings it up-to-date with MUI v5.

TheDiveO
  • 2,183
  • 2
  • 19
  • 38