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

Question

我正在使用 React js 来开发我的 Web 应用程序，并且我正在使用 React 材料设计来进行 UI 设计。以下是我引用的网址。

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

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

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

Answer 1

为了制作多行文本，您可以插入 HTML < pre > 标签，其中文本格式将被保留。然后剩下的就是继承文本的风格了。

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

Answer 2

这是一个老问题，但我发现还没有人回答它。

为了使选项卡标签获得多行和多种样式，您需要将标签和值放置在两个不同的项目中。 （确保先将它们包装在 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 3

这可能对某人有帮助。设置

white-space: break-spaces

可以帮助实现此目的，因为可以在某些父元素上将其设置为

nowrap

。

Answer 4

要扩展Domovikx的答案，您也可以使用

<Typography component="pre">{content}</Typography>

它将自动应用排版所需的所有样式。