MUI Chip: How to disable overflow/ellipses?-PHP Chinese Network Q&A

Community Learn Tools Library Leisure

English

MUI Chip: How to disable overflow/ellipses?

P粉864594965 2023-07-27 18:00:52

678

<p>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. </p>

P粉864594965

reply all(1)

P粉0463871332023-07-28 11:46:36 1 floor

Here's what I've done:

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

Like +0

Add Reply