如何调整React DnD拖拽元素的透明度以提升可见性？

利用拖拽状态动态调整样式 #

React DnD的useDrag钩子会返回isDragging状态，直接用这个状态给卡片添加透明度控制即可：

首先从useDrag中获取拖拽状态：

const [{ isDragging }, drag, preview] = useDrag(() => ({
  item: { type: 'card' },
  collect: (monitor) => ({
    isDragging: monitor.isDragging(),
  }),
}));

然后修改你的卡片className，在拖拽时强制设置完全不透明：

className={`p-3 flex flex-col gap-2 shadow-xl rounded-lg m-2 cursor-grab bg-base-200 ${isDragging ? 'opacity-100' : ''}`}

如果Tailwind类优先级不够，也可以直接用行内样式兜底：

style={{ opacity: isDragging ? 1 : 'inherit' }}

自定义拖拽预览彻底掌控样式 #

如果默认的拖拽预览透明度依旧无法修改，可以自定义拖拽预览组件，完全控制其样式：

import { useDrag } from 'react-dnd';
import ReactDOM from 'react-dom';

// 自定义预览组件，直接设置完全不透明
const CustomDragPreview = () => (
  <div className="p-3 flex flex-col gap-2 shadow-xl rounded-lg m-2 bg-base-200 opacity-100">
    {/* 这里放入你卡片的原有内容 */}
  </div>
);

// 在主组件中绑定自定义预览
const [{ isDragging }, drag, preview] = useDrag(() => ({
  item: { type: 'card' },
  collect: (monitor) => ({
    isDragging: monitor.isDragging(),
  }),
}));

useEffect(() => {
  const previewEl = document.createElement('div');
  ReactDOM.render(<CustomDragPreview />, previewEl);
  preview(previewEl);
  return () => ReactDOM.unmountComponentAtNode(previewEl);
}, [preview]);

全局CSS强制覆盖预览样式 #

如果前两种方法都不生效，直接全局修改React DnD生成的预览元素样式：

/* 在全局CSS文件中添加 */
div[data-react-dnd-preview] {
  opacity: 1 !important;
}

内容的提问来源于stack exchange，提问作者Rômulo Valentim