如何使用CSS自定义react-flow库中连线的宽度？

可以通过两种方式自定义react-flow的连线宽度，之前的属性未生效是因为React Flow的连线是SVG路径元素，使用普通width属性无效，需要用SVG专属的描边宽度属性：

方案1：单条边独立配置 #

直接在边的配置项中添加style属性，指定strokeWidth即可，你的示例修改后如下：

{
  id: 'e11', 
  source: '1', 
  target: '2',
  style: {
    strokeWidth: 4, // 数值即为连线宽度，可按需调整
    stroke: '#2563eb' // 可同步修改连线颜色
  }
}

方案2：全局CSS统一配置 #

针对React Flow内置的类名修改样式即可：

/* 作用于所有连线 */
.react-flow__edge-path {
  stroke-width: 3;
}

/* 如果只需修改特定边，先给边配置加className字段 */
/* 例：{id: 'e11', source: '1', target: '2', className: 'thick-edge'} */
/* 再写针对性CSS */
.react-flow__edge.thick-edge .react-flow__edge-path {
  stroke-width: 6;
}

注意事项 #

• 如果使用自定义边组件，需要确保组件内部将接收到的style属性透传给内部的<path>元素，否则配置会失效
• 如果样式不生效，可打开浏览器开发者工具选中连线元素，检查是否有更高优先级的样式覆盖了你的配置，可临时加!important测试排查优先级问题

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