reactjsreact-beautiful-dnd

react-beautiful-dnd Draggable removing style


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?


Solution

  • 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