reactjs - 在 react-dnd reactjs 中悬停 DropTarget 时如何更改 DragPreviewImage 的样式？

Question

我想更改 DragPreviewImage 样式，例如：缩放、填充颜色、在悬停在 DragTarget 上时更改不透明度！

这是我的简短版本示例代码：

1. DragPhoto 组件：

import React from 'react'
import { useDrag, DragPreviewImage } from 'react-dnd'

type DraggablePhotoProps = {
  photoItem: any,
  datasource: string
}

export const DraggablePhoto = (props: DraggablePhotoProps) => {

  const [{isDragging}, drag, preview] = useDrag({
    item: { type: props.datasource },
    isDragging: (monitor) => {
      console.log("Draggable Photo: isDragging" )
      return true
    },
    collect: monitor => ({
      isDragging: !!monitor.isDragging(),
    })
  })

  return (
    <>
      <DragPreviewImage connect={preview} src={props.photoItem['preview']} ref={previewRef} />
      <img src={props.photoItem['preview']}
        ref={drag}
        style={{opacity: isDragging ? 0 : 1}}
      />
    </>
  )

}

2. DragTarget 组件：

import React from 'react'
import { useDrop } from 'react-dnd'

export const CanvasContainer = (props) => {
  const [{ isOver, canDrop }, drop] = useDrop({
    accept: "upload_photo",
    drop: () => {
      console.log('CanvasContainer drop')
    },
    canDrop: () => { return true },
    hover: (item, monitor) => {
      console.log('CanvasContainer hover')
    },
    collect: (monitor) => ({
      isOver: !!monitor.isOver(),
      canDrop: !!monitor.canDrop()
    })
  })

  return (
    <div ref={drop} style={{width: '100%', height: '100%'}}>
      { props.children}
    </div>
  )

})

悬停在 div 标签上时如何更改 DragPreviewImage 的样式？

谢谢！