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?
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