Material-UI - understanding 10px simplification

Question

I don't get why we need to do this for the 10px simplification:

html {
   font-size: 62.5%; /* 62.5% of 16px = 10px */
}

It wasn't supposed to the following code do all the work?

const theme = createMuiTheme({
  typography: {
    // Tell Material-UI what's the font-size on the html element is.
    htmlFontSize: 10,
  },
});

Thank you in advance.

Answer 1

The htmlFontSize property of typography in the theme does not control the font-size of the html element; it just tells Material-UI what size you used on it. Material-UI then uses that size to control how it converts px units to rem units when determining the font sizes for all the different typography variants.