如何在ReactJS中将Material UI徽章放置在IconButton附近？

npm install @material-ui/core

import React from 'react';
import { IconButton, Badge } from '@material-ui/core';
import { withStyles } from '@material-ui/core/styles';

const styles = theme => ({
  badge: {
    top: 0,
    right: 0,
    transform: 'translate(50%, -50%)',
    '& .MuiBadge-badge': {
      backgroundColor: theme.palette.secondary.main,
      color: theme.palette.secondary.contrastText,
    },
  },
});

const MyComponent = ({ classes }) => {
  return (
    <IconButton>
      <Badge badgeContent={4} color="secondary" classes={{ badge: classes.badge }}>
        {/* 在这里放置需要徽章的图标 */}
      </Badge>
    </IconButton>
  );
};

export default withStyles(styles)(MyComponent);

import { Notifications } from '@material-ui/icons';

// ...

<Badge badgeContent={4} color="secondary" classes={{ badge: classes.badge }}>
  <Notifications />
</Badge>