如何在Material UI Chip组件中不使用onDelete实现图标后置

下面是几种无需依赖onDelete和deleteIcon属性的实现方式：

方法一：修改默认样式调整元素顺序 #

通过自定义样式调整Chip内部图标和标签的排列顺序，保留Chip的原生交互和样式：

import Chip from '@mui/material/Chip';
import InfoIcon from '@mui/icons-material/Info';

<Chip
  label="Online"
  icon={<InfoIcon />}
  sx={{
    '& .MuiChip-icon': {
      order: 2, // 将图标移到后方
      marginLeft: 1, // 调整图标与标签的间距
      marginRight: 0, // 清除图标右侧的默认间距
    },
    '& .MuiChip-label': {
      order: 1, // 标签保持在前方
    },
  }}
/>

如果需要复用该样式，可以用styled组件封装：

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

const ReverseChip = styled(Chip)(({ theme }) => ({
  '& .MuiChip-icon': {
    order: 2,
    marginLeft: theme.spacing(1),
    marginRight: 0,
  },
  '& .MuiChip-label': {
    order: 1,
  },
}));

// 使用封装后的组件
<ReverseChip label="Online" icon={<InfoIcon />} />

方法二：自定义Chip内部内容 #

直接通过children属性自定义Chip的内部布局，完全控制元素顺序：

import Chip from '@mui/material/Chip';
import InfoIcon from '@mui/icons-material/Info';

<Chip>
  <span>Online</span>
  <InfoIcon sx={{ marginLeft: 1 }} />
</Chip>

这种方式灵活性最高，你可以根据需求添加额外元素、调整间距或样式，不受Chip默认结构限制。

方法三：结合Stack组件规范布局 #

用MUI的Stack组件来管理内部元素的排列，让布局更结构化：

import Chip from '@mui/material/Chip';
import Stack from '@mui/material/Stack';
import InfoIcon from '@mui/icons-material/Info';

<Chip>
  <Stack direction="row" spacing={1} alignItems="center">
    <span>Online</span>
    <InfoIcon />
  </Stack>
</Chip>

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