材质用户界面-gutter底部与段落，有区别吗？

Question

这些有什么区别？

我正在查看Typography Component API，并且有gutterBottom和paragraphprops记录了完全相同的内容，如果为true，则margin bottom将为0。这是指向Component API的链接：https : //material-ui.com/api/typography /

Answer 1

有两部分不同。

首先css单位不同，gutterBottom的em单位是relative，1em等于父组件的font-size。

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

其次，paragraph 用于选择Typography 的基本组成部分。如果paragraph 为true，则Typography 为“p”。如果paragraph 为false，请检查两个默认设置，否则Typography 将为“span”。

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

Answer 2

好吧，它们可能会导致类似的外观（0.35em 边距 vs 16px 边距），但它们更关心语义。paragraph也将产生一个p元素而不是一个div元素。

文档可以改进。请随意提出问题，甚至打开 PR。