[docs] Improve the CssBaseline description

[levigunz]

• I have followed (at least) the PR section of the contributing guide.

Fixes bug in CssBaseline where spreading theme.typography.body2 attributes overwrites default body font colors (if they exist on body2 for some reason).

[mui-pr-bot]

No bundle size changes comparing 85058cc...7a40215

Generated by 🚫 dangerJS against 7a40215

[eps1lon]

Looks good. Though @oliviertassinari might have had a reason it was put in this specific place.

[oliviertassinari]

Could it explain why it's a but? I believe your typography color (none by default) should have priority over your palette color.

[oliviertassinari]

I'm closing, the order is important.

[eps1lon]

I'm closing, the order is important.

Could you add a test or explain why this is important? Current behavior is very opaque.

[oliviertassinari]

The CssBaseline component should apply the theme.typography.body2 variant to the body of the page. It should be equivalent to use <Typography> (with the default variant).
Let's say you customize the color of theme.typography.body2. You want to see it replicated. Changing the order would be a breaking change and prevent the color to be applied.

We should update the documentation: https://material-ui.com/components/css-baseline/#typography.

[levigunz]

@oliviertassinari In the case I'm referencing the current order is a problem because it may cause unintended color side effects for header tags. They end up inheriting the now defined body color (from body2 in current implementation) instead of the text.primary color!

I would be under the belief that the text.primary should always have priority over body2 styles on the css body tag.

Correct me if I'm wrong, but then an implemented Typography element of type body2 would still overrule the body tag color because its definition is more specific!

[joshwooding]

Hmm, changing it might be a breaking change. I would expect body2 colours to override the primary text colour but I’m more than happy to be convinced otherwise. Looks like createTypography contains a unneeded comment though? https://github.com/mui-org/material-ui/blob/045dadc4609acb756adc74fcbf1a5150a054e14e/packages/material-ui/src/styles/createTypography.js#L36

Edit: I’m back to talking myself in circles. On one point I think it’s weird to have colours in typography declarations but I can see that they might be and they should overwrite if someone wants it to

[levigunz]

@joshwooding It may come down to a matter of implementation opinion. I expected to be able to override the color of body2 individually, but still have my headings and other text inherit the text.primary color. In fact, that's how Material-UI functions until you include CssBaseline. Hence my confusion after adding CssBaseline to my project.

[oliviertassinari]

Thanks for providing the detail of your use case! I can imagine the confusion. Now, I believe that what you are describing is what we expect. in v4, we have changed the typography to be colorless by default. The color inherits for all the variants. The CssBaseline apply the body2 variant style so you can use this Typography component less frequently.

To solve your problem, I would probably extend the Typography to support a new color prop value or a new typography variant.