Skip to content

[CssBaseline] Change body font size to body1 (1rem)#24018

Merged
oliviertassinari merged 2 commits intomui:nextfrom
mbrookes:cssbaseline-body-font
Dec 15, 2020
Merged

[CssBaseline] Change body font size to body1 (1rem)#24018
oliviertassinari merged 2 commits intomui:nextfrom
mbrookes:cssbaseline-body-font

Conversation

@mbrookes
Copy link
Member

@mbrookes mbrookes commented Dec 14, 2020 •
edited by siriwatknp
Loading

Breaking changes

  • [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({
  components: {
    MuiCssBaseline: {
      styleOverrides: {
        body: {
          fontSize: '0.875rem',
          lineHeight: 1.43,
          letterSpacing: '0.01071em',
        },
      },
    },
  },
})

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

Closes #17100
Part of #20012

@mbrookes mbrookes added breaking change Introduces changes that are not backward compatible. component: CssBaseline The React component. labels Dec 14, 2020
@mbrookes mbrookes mentioned this pull request Dec 14, 2020
Closed
@mui-pr-bot
Copy link

mui-pr-bot commented Dec 14, 2020 •
edited
Loading

Details of bundle changes

Generated by 🚫 dangerJS against 53e3f1c

oliviertassinari
oliviertassinari approved these changes Dec 14, 2020
View reviewed changes
@github-actions github-actions bot mentioned this pull request Dec 14, 2020
Closed
@oliviertassinari oliviertassinari merged commit bd47246 into mui:next Dec 15, 2020
@mbrookes mbrookes deleted the cssbaseline-body-font branch December 15, 2020 21:43
@oliviertassinari oliviertassinari added this to the v5 milestone Dec 20, 2020
@oliviertassinari oliviertassinari mentioned this pull request Dec 20, 2020
Closed
42 tasks
@ed-sparkes
Copy link

ed-sparkes commented Jan 29, 2021

is this a v5 feature, is it not a bug that should be patched on v4?

@oliviertassinari
Copy link
Member

oliviertassinari commented Jan 29, 2021

@ed-sparkes it's a bug, but also a breaking change, so it was handled in v5.

@charlielow
Copy link

charlielow commented Apr 30, 2021

For v4 I worked around this by applying a global override and patching in body2 styles, ex.

const theme = createMuiTheme({
  overrides: {
    MuiCssBaseline: {
      '@global': {
        body: {
          fontSize: '0.875rem',
        },
      },
    },
  },
});

@webarnes webarnes mentioned this pull request Sep 19, 2021
Closed
2 tasks
@mbrookes mbrookes mentioned this pull request Oct 25, 2021
Closed
2 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@oliviertassinari oliviertassinari oliviertassinari approved these changes

Assignees

No one assigned

Labels

breaking change Introduces changes that are not backward compatible. component: CssBaseline The React component.

Projects

None yet

Milestone

v5.0.0-beta.0

Development

Successfully merging this pull request may close these issues.

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

5 participants

@mbrookes @mui-pr-bot @ed-sparkes @oliviertassinari @charlielow