Applying body2 styling to the body element causes weird behavior that can't be overriden

[damir-sirola]

• 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 Behavior 😯

All body2 styling is applied to the body element

Expected Behavior 🤔

Not applying all body2 styling to the body element

Steps to Reproduce 🕹

Steps:

1. In the theme, specify any styling for body2 component (for example overflow: hidden;)
2. overflow: hidden; is applied to the body tag

Context 🔦

This issue caused us to have to remove CssBaseline that we used because of hidden dependency on body2 typography styling and fall back to specifying css overrides / base styling through styled-components.
It would be a good idea to mention this in the documentation in migrating from v3 to v4 article as it's a breaking change.

Your Environment 🌎

Tech	Version
Material-UI	v4.3.3
React	16.9.0
Browser	N/A
TypeScript	3.5.3

[oliviertassinari]

@damir-sirola Thanks for raising, I was expecting body1 (font-size: 1rem) to be applied in the CssBasline (the default typography variant), not body2 (font-size: 0.875rem).
I think that we should change it in v5 for consistency. What do you think @joshwooding?

[joshwooding]

@oliviertassinari Sounds good, I think it was body2 because that was the default with
useNextVariants set.

[oliviertassinari]

@joshwooding Yes, I think that we forgot about it when changing the default typography variant.

[sjiep]

I bumped into this issue too, A potential workaround solution until this is fixed in v5, is mentioned in a comment from #18442.

const theme = createMuiTheme({
  typography: {
    body2: {
      fontSize: "1rem"
    }
  }
});