使用MUI makeStyles()动态添加类后样式不生效问题求助

问题描述 #

我使用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>
);
}

问题原因 #

MUI的makeStyles会为生成的类名添加唯一哈希后缀（例如imageUploaderDrop-xyz123），目的是避免样式冲突。而你直接使用字符串'imageUploaderDrop'操作DOM的classList，相当于添加了一个不存在的原始类名，自然无法触发对应的样式。

解决方案 #

方案1：使用styles对象中的正确类名

直接调用useStyles返回的类名变量，这是MUI生成的带哈希的有效类名：

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

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

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

方案2：用React状态管理类名（更符合React范式）

避免直接操作DOM，通过状态变量动态拼接className，这是React推荐的方式：

import { useState } from 'react';

export default function ImageUploader() {
  const styles = useStyles();
  const [isDragging, setIsDragging] = useState(false);
  const imageUploader = useRef<HTMLInputElement>(null);

  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    const file = e.dataTransfer.files[0];
    setIsDragging(false);
  };

  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    setIsDragging(true);
  };

  const handleDragLeave = () => {
    setIsDragging(false);
  };

  return (
    <Box
      className={`${styles.imageUploader} ${isDragging ? styles.imageUploaderDrop : ''}`}
      onClick={() => imageUploader.current?.click()}
      onDrop={handleDrop}
      onDragLeave={handleDragLeave}
      onDragOver={handleDragOver}
    >
      ...
    </Box>
  );
}

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