时间戳

首页 > 解决方案 > 有没有办法使用 Material-UI Chip 组件以列式布局显示两位数据？

material-ui - 有没有办法使用 Material-UI Chip 组件以列式布局显示两位数据？

问题描述

现在，我将两位数据传递给“标签”属性。所以“姓名”和“电子邮件”是并排呈现的。

             <Chip
              label={`${option.name} ${option.email}`}
              style={{
                fontSize: '12px',
                fontWeight: 'bold',
                backgroundColor: '#00E5B9', 
                borderRadius: '1px', 
                marginLeft: '10px',
                marginTop: '10px'
              }}
              onDelete={() => handleDelete(option.tag)}
            />

我正在寻找一种方法让它们以列类型的方式呈现，并在电子邮件上方显示名称。

到目前为止，我已经尝试了以下但没有成功：

我已经阅读了文档，但到目前为止我还没有找到一种方法来做到这一点。

任何人都可以推荐一种可行的方法吗？

标签： material-ui

解决方案

我在工作中遇到了同样的事情，不幸的是，唯一的方法是用 css/html 手动创建整个芯片......

您应该在 MUI 的 git 存储库上打开一个问题，并要求他们将此功能添加到芯片组件中。

<div className={classes.chip}>
    <p>foo</p>
    <p>bar</p>
</div>

并自行添加样式：

  chip: {
    color: "crimson",
    border: "1px solid crimson",
    borderRadius: theme.spacing(3.125),
  },

推荐阅读