MUI v5: BottomNavigationAction with StyledBadge Icon?

user_364966 0
Viewed 196

In Material-UI v4, I could do a StyledBadge in a BottomNavigationAction like this:

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

In MUI v5 I tried to do it like this:

<BottomNavigationAction label="Appointments" icon={
    <StyledBadge badgeContent={numberOfUnreadAPPTS.toString()} >
        <ApptsIcon />
    </StyledBadge>
} />

...but it's not liking the use of StyledBadge for the icon:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

What's the correct way to get a StyledBadge in BottomNavigationAction in MUI v5?

material-ui reactjs
1 Answers

From the comment, it turned out that @Vikr accidentally create an empty object because they thought the IDE would import a component called StyledBadge, which doesn't exist from MUI itself (probably a failed copy from this example) so it creates an empty object instead:

const StyledBadge = {};

As a result, when it's passed to the icon prop, MUI complains that StyledBadge is an object instead of a ReactNode:

<BottomNavigationAction
  icon={
    <StyledBadge badgeContent={4} color="secondary">
      <ShoppingCartIcon />
    </StyledBadge2>
  }

Working code:

const StyledBadge = styled(Badge)<BadgeProps>(({ theme }) => ({
  '& .MuiBadge-badge': {
    right: -3,
    top: 13,
    border: `2px solid ${theme.palette.background.paper}`,
    padding: '0 4px',
  },
}));

Codesandbox Demo

user_94494260
Related