Recently, I successfully migrated two MUI-powered UIs from MUI v4 to v5. In the process, I had to override their body fontSize according to the MUI migration guide to maintain the v4 design default of Typography body2 font size. This adjustment has worked perfectly.
Now, I want to ensure that the proper MUI v4 font size defaults are also reflected in my Styleguidist component style guide. To achieve this, I have developed a MuiThemeWrapper and integrated it into styleguide.config.js:
styleguideComponents: {
Wrapper: path.join(__dirname, 'styleguidist/MuiThemeWrapper.tsx')
},
The wrapper essentially accomplishes the following:
const appTheme = createTheme(
{
components: {
MuiCssBaseline: {
styleOverrides: {
body: {
fontSize: '0.875rem', // ...reverting 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, despite implementing this setup, the font size is not being displayed as expected at 14px but rather as 16px. What could be causing this discrepancy, and is the body styleOverride configured correctly in this scenario?
https://codesandbox.io/s/kind-chihiro-oet1f?fontsize=14&hidenavigation=1&theme=dark