Link Stroke Width Not Applying Correctly in JointJS

I am using JointJS to create diagrams, and I am encountering an issue with the stroke width of links between shapes. Despite setting the strokeWidth attribute to 1, the rendered link appears with a stroke width of 10.

Here is the relevant code snippet:

import "./join-tool.css";
import { dia, shapes } from "jointjs";

export class JointJSBlock {
  static get toolbox() {
    return {
      title: "Diagram",
      icon: "<svg>...</svg>", // Add an icon or use a predefined SVG
    };
  }

  constructor({ data }) {
    this.data = data || { graph: {} };
    this.wrapper = null;
    this.graph = new dia.Graph();
    this.paper = null;
  }

  render() {
    this.wrapper = document.createElement("div");
    this.wrapper.classList.add("jointjs-block");

    // Create a container for the JointJS paper
    const diagramContainer = document.createElement("div");
    diagramContainer.classList.add("jointjs-paper-container");
    this.wrapper.appendChild(diagramContainer);

    // Initialize the JointJS paper
    this.paper = new dia.Paper({
      el: diagramContainer,
      model: this.graph,
      width: "100%",
      height: 800,
      gridSize: 10,
      drawGrid: true,
      background: { color: "#F5F5F5" },
      cellViewNamespace: shapes,
    });

    // Load saved graph if available
    if (this.data.graph) {
      this.graph.fromJSON(this.data.graph);
    } else {
      this._addDefaultShapes();
    }

    return this.wrapper;
  }

  _addDefaultShapes() {
    // Rectangle 1
    const rect1 = new shapes.standard.Rectangle();
    rect1.position(50, 50);
    rect1.resize(100, 40);
    rect1.attr({
      body: { fill: "blue" },
      label: { text: "Rect1", fill: "white" },
    });
    rect1.addTo(this.graph);

    const rect2 = new shapes.standard.Rectangle();
    rect2.position(200, 50);
    rect2.resize(100, 40);
    rect2.attr({
      body: { fill: "red" },
      label: { text: "Rect2", fill: "white" },
    });
    rect2.addTo(this.graph);

    const link = new shapes.standard.Link();
    link.source(rect1);
    link.target(rect2);
    link.attr({
      line: {
        stroke: "#000000", // Color
        strokeWidth: 1, // Width
      },
    });
    link.addTo(this.graph);
  }

  save(blockContent) {
    // Save the graph data
    return {
      graph: this.graph.toJSON(),
    };
  }
}

Issue: The strokeWidth attribute for the link is set to 1, but the rendered link appears to have a stroke width of 10. Question: Why is the link stroke width not being applied correctly, and how can I ensure that the strokeWidth value is properly rendered as 1?

Maybe you can fix this with CSS. I don't know the entire code, but perhaps at some point the stroke-width is overwritten. So do something like:

path {
    stroke-width: 1 !important;
}

If you don't want 1px for every path on your site, just restrict the range by adding higher-level IDs or classes before it, like:

.connections path {
    stroke-width: 1 !important;
}

Whatever class makes sense in your case, of course.