MUI ButtonGroup中传入空props时自定义IconButton样式异常问题

MUI 的 ButtonGroup 组件对内部嵌套按钮的样式控制，是通过 React.cloneElement 直接向子元素注入专属样式控制参数实现的，不依赖上下文或全局样式继承生效。

你封装自定义 IconButton 时如果没有透传 {...props}，ButtonGroup 注入的这部分控制参数就会被完全丢弃，自然会出现两类样式异常：

• 注入参数里包含组内按钮的位置标记（首项、中间项、末项），用来裁剪对应位置的圆角，参数丢失后不会应用组内圆角规则，就会出现hover背景形状异常
• 注入参数里还包含统一样式优先级覆盖配置，用来同步组内所有按钮的颜色、变体风格，参数丢失后就会出现按钮颜色异常、无法和组样式对齐的问题

你误以为传入的是空props，实际上 ButtonGroup 已经在父层给你的自定义组件注入了非空的控制参数，这不是HOC的逻辑问题，是MUI复合组件的子组件参数注入机制的预期行为。

封装基于MUI基础组件的自定义组件时，始终透传所有未显式消费的props即可：

const CustomIconButton = (props) => {
  // 自定义逻辑处理
  return <IconButton 
    {...props}
    // 你的自定义配置参数
  />
}

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