[Typography] Improve handling of spacing

Hi! I was upgrading to 3.x.x and noticed that Typography now has paragraph prop and thought I’d share why it might not satisfy the most common scenarios fully.

Based on use-cases in our projects so far, we’ve created a thin wrapper around Typography which allows us to apply custom bottom margins. We accept 3 values for the bottom margin (we override gutterBottom for this purpose) - small, medium and large equal to one, two and three spacing units.

The large bottom margins gets applied to headings in various scenarios where we want to create more spacing between heading text and content of a page section. Some examples: page header, or a custom modal.

The medium one provides spacing equal to the one provided by paragraph prop and is used for the same purpose, with minor distinction - we also apply it to small headings to create spacing between the heading and paragraph text, in which case it would be wrong to add a paragraph prop to a heading because that’s not what it is.

Lastly, the small bottom margin is useful for where gutterBottom would be used.

I was wondering whether you’d be open to discussing how to address the use-cases. We try to minimize the number of places where styles need to be custom and injected to a component, and so being able to build simple layouts of heading + text without writing a line of styles has rather great value to us.

[maciej-gurban]

Apologies for not being clearer.

What I’m saying is that since we provide gutterBottom and paragraph to provide certain marginBottom, perhaps it would be worth looking into what the most common uses cases are. Our teams use MUI heavily, and providing these 3 types of bottom spacing was very useful in minimizing custom styling work needed for simple layouts involving Typography.

I’m asking whether you think providing something like gutterBottom with small, medium, large would work for general userbase of this MUI.

[oliviertassinari]

@KyruCabading It’s already exposed. It doesn’t require a wrapper, you can target the CSS class name or use theme.overrides.MuiTypography.gutterBottom.