Material Ui - gutterBottom vs Paragraph, Difference?

What is the difference between these?

I'm looking at the Typography Component API and there's gutterBottom and paragraph props that documented the exact same thing, if true, margin bottom will be 0. Here's the link to the Component API:

2 Answers

There are two parts of difference.


First,the css unit is different.The em unit for gutterBottom is relative.1em equals to the font-size of the father component.

gutterBottom: {
    marginBottom: '0.35em',
},
paragraph: {
    marginBottom: 16,
},

Second,paragraph is used to choose the basic component of Typography.If paragraph is true ,the Typography is "p".If paragraph is false,check the two default setting, or the Typography will be "span".

const Component =
    componentProp ||
    (paragraph ? 'p' : headlineMapping[variant] || defaultHeadlineMapping[variant]) ||
    'span';

Well they may cause a similar look (0.35em margin vs 16px margin) but they are more concerned with semantics. paragraph will also result in a p element rather than a div element.

The documentation could be improved. Feel free to raise an issue or even open a PR.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Sarah Jenkins

Sarah Jenkins

Senior Technology Editor & AI Specialist

Sarah Jenkins is a veteran tech journalist with over 12 years of experience covering artificial intelligence, mobile innovations, and digital ethics. Her insights have appeared in leading technology publications worldwide.

Share this article
Twitter Facebook Pinterest