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

Question

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

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

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



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

Answer 1

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

为了获得标签标签的多行和多样式，您需要将标签和值放在两个不同的项目中。 (确保首先将它们包装在 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>
   }
 />

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

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