MUI v5.15.0中如何让Chip组件图标显示在标签右侧？

要让Chip的图标显示在标签右侧且保持正常间距，直接通过sx属性调整内部元素的布局即可，不需要全局CSS或额外加内边距：

<Chip
  label={`Trip ${props.tripNumber}`}
  variant="outlined"
  onClick={handleClick}
  icon={<ArrowForwardOutlined />}
  sx={{
    borderColor: "#0049AF",
    // 调整图标和标签的排列顺序
    "& .MuiChip-icon": {
      order: 1,
      // 重置默认的左侧margin，改用右侧margin控制和标签的间距
      marginLeft: 0,
      marginRight: 0.5, // 可根据需求调整，MUI的spacing单位，0.5对应4px
    },
    "& .MuiChip-label": {
      order: 0,
    },
  }}
/>

问题原因分析 #

• 单独给.MuiChip-icon设置order:1时，图标默认的marginLeft（MUI内置为8px）依然存在，导致和标签间距过大；同时Chip的内部布局未适配顺序反转，图标会超出组件边框。
• 手动添加paddingRight只是拓宽了组件宽度，但没有从根本上调整图标和标签的间距逻辑。

核心优化点 #

• 同时给图标和标签设置order，确保整体布局顺序正确。
• 重置图标默认的左侧外边距，改用右侧外边距来控制与标签的间距，符合排版逻辑。
• 无需额外修改组件内边距，Chip自身的内边距足以让图标在边框内正常显示。

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