如何使用react-dnd修改拖拽元素样式，解决拖拽时出现背景色问题

拖拽元素示例图：

我在使用react-dnd实现元素拖拽功能时，发现被拖拽的元素会自带背景色，请问该如何修改拖拽元素的样式以解决该问题？

出现这个问题一般是两种原因：一是HTML5原生拖拽的默认反馈样式，二是没有自定义拖拽预览走了默认逻辑，下面是可直接落地的解决方法：

• 方案一：完全自定义拖拽预览（最推荐，可100%控制样式）
  先隐藏官方默认的拖拽预览，自己实现跟随鼠标的预览元素即可完全规避默认样式干扰：

  import { useDrag } from 'react-dnd'
  import { getEmptyImage } from 'react-dnd-html5-backend'
  import { useEffect } from 'react'
  
  function DragItem() {
    const [{ isDragging }, drag, preview] = useDrag(() => ({
      type: '你的拖拽类型标识',
      item: { /* 拖拽需要传递的数据 */ },
      collect: monitor => ({
        isDragging: monitor.isDragging()
      })
    }))
  
    // 组件挂载时隐藏默认的拖拽预览
    useEffect(() => {
      preview(getEmptyImage(), { captureDraggingState: true })
    }, [preview])
  
    return <div ref={drag}>你的元素原有内容</div>
  }
  

  后续自行实现一个全局定位的组件，监听鼠标移动事件，拖拽触发时渲染自定义的预览样式即可。
• 方案二：直接覆盖拖拽状态样式
  如果不需要完全自定义预览，只是想去掉默认背景色，可以直接通过拖拽状态修改样式：
  方法1：用collect返回的isDragging状态动态绑定样式

  <div
    ref={drag}
    style={{
      backgroundColor: isDragging ? 'transparent' : '你的元素原有背景色',
      opacity: isDragging ? 0.6 : 1
    }}
  >
    元素内容
  </div>
  

  方法2：全局添加CSS覆盖默认样式

  /* 禁用拖拽时的选中背景 */
  .drag-item {
    user-select: none;
    -webkit-user-drag: none;
  }
  /* 覆盖拖拽过程中元素的默认背景 */
  [data-dragging="true"] {
    background: transparent !important;
  }
  

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