emotion & react-beautiful-dnd: conditional style not working with css prop

Question

I am trying to conditionally transform a drag&drop element (using react-beautiful-dnd), rotating it while it's being dragged, something which I've seen done with emotion-css using the styled component syntax like this:

const Element = styled.div`    
  display: flex;
  ${props =>
    props.isDragging &&
    css`
      transform: rotate(15deg);
    `}
`;

But I cannot get it working using emotion's css property. For instance, in the example below, conditionally changing the color works (element becomes red while being dragged around), but the rotation transform does not, and it only seems to be triggered if the element is dropped outside of a droppable area, only displaying the rotation on its automatic path back to its original location:

<Element>
  {(provided, snapshot) => (
    <div
      css={{
        display: 'flex',       
        color: snapshot.isDragging ? 'red' : 'black',
        transform: snapshot.isDragging ? 'rotate(15deg)' : 'none',
      }}
    >
</Element>

Is there a way of doing this using the css prop? I've also seen people comment against using the ternary operator here as it's bad for performance, so I'm assuming there is a better way of doing this.

Answer 1

I found the answer in the documentation:

Warning: position: fixed

react-beautiful-dnd uses position: fixed to position the dragging element. This is quite robust and allows for you to have position: relative | absolute | fixed parents. However, unfortunately position:fixed is impacted by transform (such as transform: rotate(10deg);). This means that if you have a transform: * on one of the parents of a Draggable then the positioning logic will be incorrect while dragging. Lame! For most consumers, this will not be an issue. We may look into creating a portal solution where we attach the dragging element to the body rather than leave it in place. However, leaving it in place is a really nice experience for everyone. For now, we will leave it as is, but feel free to raise an issue if this is important to you.