Реагирующая-красивая-перетаскиваемая не отображается во время перетаскивания

Question

Я создаю трелло-подобный компонент с использованием response-beautiful-dnd, однако перетаскиваемый объект не виден во время перетаскивания, и я пытаюсь понять, почему.

Смотрите GIF здесь

Это соответствующий код: здесь

Я чувствую, что это как-то связано с

<Draggable
  draggableId={this.props.task.id}
  index={this.props.index}
>
  {(provided, snapshot) =>
    <div className={this.getClassName(snapshot.isDragging)}
      {...provided.draggableProps}
      ref={provided.innerRef}
      onClick={this.toggleDialog}
    >
      //etc
    </div>
  )}
</Draggable>

Но я в тупике

Answer 1

Обычно это происходит, когда в родительских компонентах есть свойство преобразования (Пример преобразования: масштаб (0.9)).

Итак, свойство фиксированной позиции по умолчанию не работает должным образом.

Итак, нам нужно либо удалить свойство преобразования, которое обертывает компонент перетаскивания, либо просто переопределить свойство position с помощью static.

<div className={this.getClassName(snapshot.isDragging)}
  {...provided.draggableProps}
  ref={provided.innerRef}
  style={{ ...provided.draggableProps.style, position: 'static' }}
  onClick={this.toggleDialog}
>