material -ui 的 Typography 组件的有效值是什么

Question

我正在使用 Typography 组件，如下所示。我没有遇到任何错误。但我只想知道我传递给排版组件的组件属性是否是正确的值。

  <Typography component="div" style={{ padding: 8 }}>
      {props.children}
    </Typography>

可以传递给组件属性的有效值是什么？

Answer 1

Typography 是一个相当简单的组件。它所做的只是在组件上指定className，以便适当地设置文本样式。

您的示例代码大致相当于：

<div className="potentially-multiple-classes-determined-by-Typography" style={{ padding: 8 }}>
   {props.children}
</div>

component 属性可以是任何可以在 JSX 中用作元素类型的有效元素。排版将使用组件属性（如果未指定 component 属性或 variant 属性，则默认为 'p'）来渲染将类名传递给的元素，并且它还传递不属于的任何属性Typography API（这就是为什么 style 和 children 属性在本例中传递给组件的原因）。