MUI v5中如何在BottomNavigationAction内正确使用StyledBadge作为图标？

报错原因 #

MUI v5 调整了BottomNavigationAction组件icon属性的校验规则，要求传入可执行的组件类型（函数组件/类组件），而非已经实例化完成的JSX元素对象。你之前直接传入<StyledBadge>标签属于已渲染的JSX对象，不符合类型要求，因此触发type is invalid的报错。

正确实现方式 #

最简修改方案 #

直接将原有图标逻辑包裹为匿名函数组件传入icon属性即可，原有其他配置不需要改动：

<BottomNavigationAction 
  label="Appointments" 
  icon={() => (
    <StyledBadge badgeContent={numberOfUnreadAPPTS.toString()} overlap="circular">
        <ApptsIcon />
    </StyledBadge>
  )}
  classes={{
    root: classes.actionItemStyles,
    selected: classes.selected
  }}
  disabled={!AppState.netWorkIsOnline}
/>

可复用封装方案 #

如果多处需要使用带徽章的底部导航图标，可以单独封装为公共组件复用：

// 封装通用带徽章的图标组件
const BadgedIcon = ({ badgeContent, children, ...badgeProps }) => (
  <StyledBadge badgeContent={badgeContent.toString()} {...badgeProps}>
    {children}
  </StyledBadge>
)

// 业务侧调用
<BottomNavigationAction 
  label="Appointments" 
  icon={() => (
    <BadgedIcon badgeContent={numberOfUnreadAPPTS} overlap="circular">
      <ApptsIcon />
    </BadgedIcon>
  )}
  // 其他属性正常配置
/>

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