我用MUI makeStyles()写了一堆CSS类。在这些类中，我动态地向文件drag-and-drop事件中的Box元素添加和删除一个类。
这个类被成功地应用了，我甚至可以看到当我在我的元素上拖动一个文件时它被应用了。但是，我看不到类中的样式应用于我的元素。我不知道什么是错的，任何帮助将不胜感激。
下面是我的代码片段-

const useStyles = makeStyles({
  imageUploader: {
    width: '100%',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    gap: '8px',
    padding: '24px 16px',
    border: '1px dashed #AAAAAA',
    borderRadius: '4px',
    cursor: 'pointer',
  },
  imageUploaderDrop: {
    background: '#e4e4e4',
  },
});

export default function ImageUploader() {
  const styles = useStyles();
  const imageUploaderContainer = useRef<HTMLDivElement>(null);
  const imageUploader = useRef<HTMLInputElement>(null);

  const classList = () => imageUploaderContainer.current?.classList;

  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    const file = e.dataTransfer.files[0];
    classList()?.remove('imageUploaderDrop');
  };

  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    if (!classList()?.contains('imageUploaderDrop')) {
      classList()?.add('imageUploaderDrop');
    }
  };

  const handleDragLeave = () => {
    if (classList()?.contains('imageUploaderDrop')) {
      classList()?.remove('imageUploaderDrop');
    }
  };

return (
    <Box
      className={styles.imageUploader}
      onClick={() => imageUploader.current?.click()}
      onDrop={handleDrop}
      onDragLeave={handleDragLeave}
      onDragOver={handleDragOver}
      ref={imageUploaderContainer}
    >
      ...
    </Box>