react-beautiful-dnd Draggable removing style

Question

I'm learning react-beautiful-dnd, and I have this component:

function Card(props: CardProps) {
  const { id } = props;

  return (
    <Draggable draggableId={String(id)} index={0}>
      {provided => (
        <div style={{backgroundColor: "brown"}}
          {...provided.draggableProps}
          {...provided.dragHandleProps}
          ref={provided.innerRef}
        >
          <h2>Hello</h2>
        </div>
      )}
    </Draggable>
  );
}

When I include {...provided.draggableProps}, as they suggest, it removes the style tag. When I check the element with my browser's inspector, it says style: "". How can I prevent this from happening?

Answer 1

draggableProps contains style If you want to use the passed style but only change one attribute, change the sequence of the style in the component props

    <div 
      {...provided.draggableProps}
      {...provided.dragHandleProps}
      style={{backgroundColor: "brown"}}
      ref={provided.innerRef}
    >

Otherwise, extract what you need from draggableProps and ignore the style that comes with it