ReactFlow背景组件覆盖节点，交互功能失效问题求助

问题根源是Background组件默认会捕获鼠标事件，导致下方的节点和连线无法接收交互信号。只需给Background组件添加pointerEvents: 'none'样式，让事件穿透到下层元素即可。

修改后的Background组件代码：

<Background 
  color='#a6a6a6' 
  variant={'dots' as BackgroundVariant}
  style={{ pointerEvents: 'none' }}
/>

完整的CreateGraph组件代码：

import React, { useCallback, useState } from 'react';
import ReactFlow, {
    addEdge,
    FitViewOptions,
    applyNodeChanges,
    applyEdgeChanges,
    Node,
    Edge,
    NodeChange,
    EdgeChange,
    Connection,
    Background,
    BackgroundVariant,
} from 'reactflow';

interface CreateGraphProps {

}

const initialNodes: Node[] = [
    { id: '1', data: { label: 'Node 1' }, position: { x: 5, y: 5 } },
    { id: '2', data: { label: 'Node 2' }, position: { x: 5, y: 100 } },
];

const initialEdges: Edge[] = [{ id: 'e1-2', source: '1', target: '2' }];

const fitViewOptions: FitViewOptions = {
    padding: 0.2,
};

export const CreateGraph: React.FC<CreateGraphProps> = ({ }) => {
    const [nodes, setNodes] = useState<Node[]>(initialNodes);
    const [edges, setEdges] = useState<Edge[]>(initialEdges);

    const onNodesChange = useCallback(
        (changes: NodeChange[]) => setNodes((nds) => applyNodeChanges(changes, nds)),
        [setNodes]
    );
    const onEdgesChange = useCallback(
        (changes: EdgeChange[]) => setEdges((eds) => applyEdgeChanges(changes, eds)),
        [setEdges]
    );
    const onConnect = useCallback(
        (connection: Connection) => setEdges((eds) => addEdge(connection, eds)),
        [setEdges]
    );

    return (
        <div>
            <ReactFlow
                nodes={nodes}
                edges={edges}
                onNodesChange={onNodesChange}
                onEdgesChange={onEdgesChange}
                onConnect={onConnect}
                attributionPosition='bottom-right'
                fitView
                fitViewOptions={fitViewOptions}>
                    <Background 
                        color='#a6a6a6' 
                        variant={'dots' as BackgroundVariant}
                        style={{ pointerEvents: 'none' }}
                    />
            </ReactFlow>
        </div>
    );
}

这样修改后，Background会作为背景层存在，不会拦截节点拖动、连线创建等交互操作。

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