【问题标题】: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 吗?还是当前版本?另外,您可以只查找演示网站的来源。
  • 接下来我正在使用材质 UI。

标签: reactjs material-ui


【解决方案1】:

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

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

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

【讨论】:

  • 对我有用:
     {project.description} 
【解决方案2】:

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

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

MUI @1.0.0 中的首选方式是使用&lt;Typography /&gt; 标签。

查看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 示例创建了一个沙箱

【讨论】:

    猜你喜欢
    • 2020-02-06
    • 1970-01-01
    • 2021-11-17
    • 1970-01-01
    • 2020-04-16
    • 2018-11-22
    • 2021-04-21
    • 1970-01-01
    • 2021-01-20
    相关资源
    最近更新 更多