Material-UI中如何设置元素dragOver拖拽状态的样式

&:hover写法生效的前提是，:hover是CSS标准定义的原生伪类，浏览器可以自动匹配元素的鼠标悬停状态。你尝试的&:dragOver写法无效，核心原因是CSS不存在名为:dragOver的标准伪类：dragover是DOM交互事件，不是浏览器原生支持的可通过CSS直接匹配的元素状态，选择器无法命中自然不会生效。

通过本地状态绑定拖拽事件控制样式即可，兼容性最好、逻辑可控，实现步骤如下：

• 定义布尔类型的本地状态，标识当前元素是否处于拖拽悬停状态
• 给目标元素绑定onDragOver、onDragLeave、onDrop事件，在对应回调中更新状态值
• 在sx配置中根据状态值动态设置backgroundColor属性

参考实现代码：

import { Box } from '@mui/material';
import { useState } from 'react';

export default function DragArea() {
  const [isDragOver, setIsDragOver] = useState(false);

  return (
    <Box
      sx={{
        width: 240,
        height: 160,
        border: '1px dashed #999',
        borderRadius: 1,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        // 根据拖拽状态切换背景色
        backgroundColor: isDragOver ? 'yellow' : 'transparent'
      }}
      onDragOver={(e) => {
        // 必须阻止默认行为，否则浏览器会默认拦截拖拽放置逻辑
        e.preventDefault();
        setIsDragOver(true);
      }}
      onDragLeave={() => setIsDragOver(false)}
      onDrop={(e) => {
        e.preventDefault();
        setIsDragOver(false);
        // 此处可添加拖拽释放后的业务逻辑，比如读取拖拽的文件/内容
      }}
    >
      将内容拖拽到此处
    </Box>
  );
}

• 不要在sx中使用不存在的自定义伪类名，&后拼接的必须是浏览器可识别的合法CSS选择器
• onDragOver事件中必须调用e.preventDefault()，否则拖拽状态不会按预期更新，也无法触发后续的drop事件
• 目前没有通用的纯CSS标准伪类可以直接匹配dragover状态，不推荐使用带浏览器私有前缀的非标准伪类，兼容性没有保障

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