react-beautiful-dnd中Draggable引入draggableProps后样式丢失求助

你的问题根源在于JSX属性的优先级：{...provided.draggableProps} 内部包含了style属性，它会覆盖你之前声明的style={{backgroundColor: "brown"}}——因为JSX中后出现的同名属性会覆盖前面的。

有两种简单的修复方案：

方案一：合并自定义样式与provided中的样式 #

将自定义样式和provided.draggableProps.style合并后传入，可灵活控制优先级：

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

  return (
    <Draggable draggableId={String(id)} index={0}>
      {provided => (
        <div 
          style={{
            backgroundColor: "brown",
            // 若想让provided的样式优先级更高，把这行移到自定义样式前面
            ...provided.draggableProps.style
          }}
          {...provided.draggableProps}
          {...provided.dragHandleProps}
          ref={provided.innerRef}
        >
          <h2>Hello</h2>
        </div>
      )}
    </Draggable>
  );
}

方案二：调整属性顺序，让自定义style后置 #

直接把自定义style写在{...provided.draggableProps}之后，利用JSX属性优先级覆盖原有样式：

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

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

两种方案都能解决样式被清空的问题，可根据实际需求选择。

内容的提问来源于stack exchange，提问作者rbits