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

【问题标题】：how to achieve multi line label with react Material UI如何使用 React Material UI 实现多行标签
【发布时间】：2017-10-27 06:47:52
【问题描述】：

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

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

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

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

【问题讨论】：

接下来你真的在使用 Material UI 吗？还是当前版本？另外，您可以只查找演示网站的来源。
请提供minimal reproducible example
接下来我正在使用材质 UI。

标签： reactjs material-ui

【解决方案1】：

为了制作多行文本，您可以插入 HTML

 标签，从中保留文本格式。那么剩下的就是继承文本的样式了。

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

【讨论】：

对我有用：
{project.description}

【解决方案2】：

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

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

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

查看typography docs 了解所有变体。

所以它看起来像这样：

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

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

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

【讨论】：