Currently, I am utilizing MUI makeStyles() to create a series of CSS classes. Within these classes, I am dynamically including and excluding one specific class to my Box element during file drag-and-drop events.
The class is successfully added, as I can observe it being applied while dragging a file over my element. However, the styles within the class are not reflecting on my element. I'm unsure about what could be causing this issue and any guidance would be greatly appreciated.
Below is an excerpt from my code:
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>