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

Question

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

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

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

我正在使用标签，但我无法获得两行文字，就像我分享的图片一样。或者我可以使用图像和标签，或者如果标签太大，那么它会进入多行。如何像图像一样实现两行文本

Answer 1

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

标记，从中保留文本格式。然后仍然可以继承文本的样式。


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

      

Answer 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提供的MUI示例创建了一个沙箱：https://codesandbox.io/s/vw6107rv3