React中使用MUI Chip组件：如何禁用溢出/省略号效果？

要让Chip组件宽度根据内部标签灵活调整，完整显示文本不出现省略号，可以通过以下几种方式实现：

方法一：自定义样式组件覆盖默认限制 #

MUI的Chip默认设置了最大宽度、溢出隐藏和文本省略规则，通过styled工具自定义组件来覆盖这些属性即可：

import Chip from '@mui/material/Chip';
import { styled } from '@mui/material/styles';

const AutoWidthChip = styled(Chip)(({ theme }) => ({
  maxWidth: 'none', // 移除默认最大宽度限制
  overflow: 'visible', // 取消溢出隐藏
  textOverflow: 'clip', // 替换省略号为完整显示
  whiteSpace: 'nowrap', // 保持文本单行显示（需换行可改为normal）
}));

// 使用示例
function Demo() {
  return (
    <div style={{ gap: 8, display: 'flex', flexWrap: 'wrap' }}>
      <AutoWidthChip label="短标签" />
      <AutoWidthChip label="这是一段需要完整展示的超长标签内容" />
    </div>
  );
}

方法二：内联样式快速调整 #

如果不需要复用组件，直接通过内联样式修改目标属性：

<Chip 
  label="超长标签示例，确保无省略号完整显示" 
  style={{
    maxWidth: 'none',
    overflow: 'visible',
    textOverflow: 'clip',
    whiteSpace: 'nowrap'
  }} 
/>

补充：支持文本换行的场景 #

若希望长标签自动换行而非横向扩展，只需调整whiteSpace属性：

const WrappingWidthChip = styled(Chip)(({ theme }) => ({
  maxWidth: 'none',
  whiteSpace: 'normal',
  overflow: 'visible',
}));

调整后，Chip会完全根据内部标签的长度或换行情况自适应宽度，短标签收缩、长标签扩展，确保文本完整显示不被截断。

内容的提问来源于stack exchange，提问作者Robin Wieruch