Material-UI: How to specify maxWidth of Chip?

Question

My chips might contain very long strings, so I would like to limit the width of the chip, and show the full text in a Tooltip.

However when I try to change the maxWidth, it only ends up changing the width of the grey, pill-shaped part of the Chip -- the label continues to overflow, and the "delete" button also gets out of place and appears outside the chip.

Normal:

After applying maxWidth:

I have tried using inline style={{}} prop, as well as trying the "withStyles" approach to create my own custom styled Chip, but both have the same effect.

I modified the Chip example from Material-UI docs to demonstrate the issue: https://codesandbox.io/s/material-demo-zt72h

Edit: If I also adjust the 'overflow' styling, it's almost there, but all I see is a truncated section from the middle of the string, no ellipsis, and the delete button has disappeared:

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

Answer 1

You need to provide your custom implementation to label prop (that's just an example, you might need to modify it to better suit your case):

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>
  )
}

And than use it in Chip:

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