是否有一种方法使用Material-UI Chip组件来显示两位数据与列式布局?

Question

现在，我将两个数据位传递给标签"属性。所以这个名字和";email"并排呈现。

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

我正在寻找一种方法，让他们呈现在一个列类型的时尚与电子邮件上方的名称。

到目前为止，我尝试了以下操作，但没有成功:

• 在标签label={${option.name} n ${option.name}中添加换行字符n。email}}
• 将email作为内容的一部分<Chip label={option.name}> {option.email}</Chip>

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

谁能推荐一种可行的方法?

Answer 1

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

你应该在MUI的git库中打开一个issue，并要求他们将此功能添加到芯片组件中。

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

和添加自己的样式:

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