Material UI - gutterBottom vs paragraph, difference?

Question

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: https://material-ui.com/api/typography/

Solution 1

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';

Solution 2

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.