React-flow line width

Viewed 444

Is there any way to customise line's width in react-flow library with css?

I have tried stroke, lineStyle, width and so, but none of them seems to work and I couldn't find anything in the documentation.

{id: 'e11', source: '1', target: '2'},
2 Answers

Add something like the following to your CSS file:

path.react-flow__edge-path {
  stroke-width: 4;
}

path.react-flow__edge-path:hover {
  stroke-width: 10;
}

In the object for your edge in the elements array, insert a field name style and give it an object { strokeWidth: 3 }. 3 is pretty thick already. I think the default is 1 -- not sure about that.

{id: 'e11', source: '1', target: '2', style:{strokeWidth:3} },

Related