[CssBaseline/Migration] Change in default fontSize

[webarnes]

This is an issue with documentation.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Text 😯

One of the v5 breaking changes is #24018 and the suggested fix is:

[CssBaseline] The body font size has changed from theme.typography.body2 (0.875rem) to theme.typography.body1 (1rem).
To return to the previous size, you can override it in the theme:

const theme = createMuiTheme({
  typography: {
    body1: {
      fontSize: '0.875rem',
    },
  },
});

(Note that this will also affect use of the Typography component with the default body1 variant).

Suggested Text 🤔

It would make more sense to address this with an override to CssBaseline itself. As noted, the fix above will change body1 to be the same size as body2 throughout the app. Better to just change the fontSize on body back to the old default:

const theme = createMuiTheme({
  components: {
    MuiCssBaseline: {
      styleOverrides: {
        body: {
          fontSize: '0.875rem',
        },
      },
    },
  },
})

Possibly, to perfectly mimic the old behaviour, it should also include lineHeight and letterSpacing.

[TheSpookyCat]

Would it be possible to add this as part of AdaptV4Theme and thus part of the codemod? Being a breaking change surely it should be handled as I certainly didn't expect to see the change in font size after following the migration guide.

[siriwatknp]

@webarnes I agree, the approach to old behavior should be done via CSSBaseline not body1 variant.

[mnajdova]

@webarnes would you like to create a PR for updating the migration guide? :)