MUI Chip: How to disable overflow/ellipses?

Question

When using MUI in React, I want to set a flexible width for the Chip component based on the length of the label. For example, if it is a long label, Chip should have a wider width. If the label is short, the Chip can also have a smaller width. In short, the entire label should be fully visible within the Chip, and there should be no ellipses.

Answer 1

Here's what I've done:

<Chip
  sx={{
    padding: '0 8px',
    '& .MuiChip-label': {
      overflow: 'visible',
    },
  }}
  ...
/>