如何使用 React Material UI 实现多行标签

Question

我正在使用 react js 来开发我的 Web 应用程序，并且我正在为 UI 使用 React 材料设计。下面是我指的网址。

https://material-ui-next.com/

我正在努力实现这样的目标

我正在使用选项卡，但无法像我共享的图像一样获得两行文本。我可以使用图像和标签，或者如果标签太大，那么它会进入多行。我怎样才能像图像一样实现两行文本

Answer 1

这是一个老问题，但我看到没有人回答它。

为了获得标签标签的多行和多样式，您需要将标签和值放在两个不同的项目中。（确保首先将它们包装在 div 中）

MUI @1.0.0 中的首选方式是使用<Typography />标记。

查看所有变体的排版文档。

所以它看起来像这样：

<Tab
   value={this.state.value}
   label={
      <div>
        <Typography variant="caption">
          Following
        </Typography>
        <Typography variant="title">
          58
        </Typography>
      </div>
   }
 />

但是，由于您的所有选项卡都需要它，您可能应该创建一个函数来处理它。

我根据此处提供的 MUI 示例创建了一个沙箱：https : //codesandbox.io/s/vw6107rv3

Answer 2

为了制作多行文本，您可以插入 HTML <pre> 标签，从中保留文本格式。然后它仍然是继承文本的样式。

 <Typography>
    <pre style={{ fontFamily: 'inherit' }}>
        {content}
    </pre>
 </Typography>