如何设置MUI Chip样式，使多个芯片长度保持一致？

要让多个MUI Chip保持一致长度，有两种常用实现方式：

方式一：设置固定宽度 #

直接通过sx属性给Chip指定固定宽度，同时让文本居中对齐，确保视觉统一：

import Chip from '@mui/material/Chip';

export default function FixedWidthChips() {
  return (
    <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
      <Chip label="短标签" sx={{ width: 120, justifyContent: 'center' }} />
      <Chip label="中等长度标签" sx={{ width: 120, justifyContent: 'center' }} />
      <Chip label="内容很长的标签" sx={{ width: 120, justifyContent: 'center' }} />
    </div>
  );
}

方式二：自适应容器宽度（flex布局） #

如果希望Chip根据容器宽度自动分配且长度一致，可利用flex布局，给Chip设置flex:1并限制最大宽度，同时处理过长文本的显示：

import Chip from '@mui/material/Chip';

export default function FlexChips() {
  return (
    <div style={{ display: 'flex', gap: '8px' }}>
      <Chip 
        label="短标签" 
        sx={{ 
          flex: 1, 
          maxWidth: 150, 
          justifyContent: 'center',
          whiteSpace: 'nowrap',
          textOverflow: 'ellipsis',
          overflow: 'hidden'
        }} 
      />
      <Chip 
        label="中等长度标签" 
        sx={{ 
          flex: 1, 
          maxWidth: 150, 
          justifyContent: 'center',
          whiteSpace: 'nowrap',
          textOverflow: 'ellipsis',
          overflow: 'hidden'
        }} 
      />
      <Chip 
        label="内容很长的标签示例" 
        sx={{ 
          flex: 1, 
          maxWidth: 150, 
          justifyContent: 'center',
          whiteSpace: 'nowrap',
          textOverflow: 'ellipsis',
          overflow: 'hidden'
        }} 
      />
    </div>
  );
}

注：whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden'这组样式可以避免过长文本换行或撑破Chip容器，自动显示省略号优化视觉效果。

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