Material-UI：如何指定Chip的maxWidth？

Question

我的芯片可能包含很长的字符串，因此我想限制芯片的宽度，并在工具提示中显示全文。

然而，当我尝试更改 maxWidth 时，它最终只会更改芯片的灰色药丸状部分的宽度 - 标签继续溢出，并且“删除”按钮也失去位置并出现在芯片。

普通的：

应用 maxWidth 后：

我尝试过使用内联 style={{}} 属性，并尝试使用“withStyles”方法来创建我自己的自定义样式 Chip，但两者具有相同的效果。

我修改了 Material-UI 文档中的芯片示例来演示该问题：https://codesandbox.io/s/material-demo-zt72h

编辑：如果我还调整“溢出”样式，它几乎就在那里，但我看到的只是字符串中间的截断部分，没有省略号，并且删除按钮已经消失：

  chip: {
    maxWidth: 100,
    whiteSpace: "nowrap",
    overflow: "hidden",
    textOverflow: "ellipsis"
  }

Answer 1

您需要向labelprop 提供自定义实现（这只是一个示例，您可能需要修改它以更好地适合您的情况）：

const CHIP_MAX_WIDTH =  100;
const CHIP_ICON_WIDTH = 30;

const EllipsisText = (props) => {
  const { children } = props

  return (
    <div style={{
      whiteSpace: "nowrap",
      overflow: "hidden",
      textOverflow: "ellipsis",
      maxWidth: CHIP_MAX_WIDTH - CHIP_ICON_WIDTH
      }}>
      {children}
    </div>
  )
}

而不是在以下位置使用它Chip：

<Chip
   size="small"
   key={data.key}
   icon={icon}
   label={<EllipsisText>{data.label}</EllipsisText>}
   onDelete={data.label === "React" ? undefined : handleDelete(data)}
   className={classes.chip}
/>