Line not showing in bootstrap card - Invalid DOM Property stroke-width

[4br3mm0rd]

Hi,

Great Job and thank you for sharing!

I tried to implement the example, and it did not completely work: the line between the steps doesn't show up! It seems to be related to the fact that I'm using it inside a bootstrap ".card" element (when I take it out, the line shows up).

Here is my code:

import React from "react";
import StepProgressBar from "react-step-progress";
import { Card, Row, Col } from "react-bootstrap";

// Style
import "react-step-progress/dist/index.css";

const MultiStepFormCard = ({ title }) => {
    return (
        <Card>
            <Card.Header>
                <Row className="align-items-center">
                    <Col>
                        <h3 className="mb-0">{title}</h3>
                    </Col>
                </Row>
            </Card.Header>
            <Card.Body>
                <StepProgressBar
                    startingStep={0}
                    steps={[
                        {
                            label: "Step 1",
                            name: "step 1",
                            content: <div>Hello</div>,
                        },
                        {
                            label: "Step 2",
                            name: "step 2",
                            content: <div>Hello</div>,
                        },
                        {
                            label: "Step 3",
                            name: "step 3",
                            content: <div>Hello</div>,
                        },
                    ]}
                />
            </Card.Body>
        </Card>
    );
};

Also, when I move from a step to another, it gives me the following error:

react_devtools_backend.js:2273 Warning: Invalid DOM property `stroke-width`. Did you mean `strokeWidth`?
    in path (created by StepProgressBar)
    in svg (created by StepProgressBar)
    in span (created by StepProgressBar)
    in li (created by StepProgressBar)
    in ul (created by StepProgressBar)
    in div (created by StepProgressBar)
    in StepProgressBar (at MultiStepFormCard.js:16)
    in div (at MultiStepFormCard.js:15)
    in div (created by CardBody)
    in CardBody (at CardWrapper.js:19)
    in div (created by Card)
    in Card (at CardWrapper.js:10)
    in CardWrapper (at MultiStepFormCard.js:12)
    in MultiStepFormCard (at NewOffer.js:13)
    in div (created by Col)
    in Col (at NewOffer.js:12)
    in div (created by Row)
    in Row (at NewOffer.js:11)
    in div (created by Container)
    in Container (at NewOffer.js:10)
    in NewOffer (created by Context.Consumer)
    in Route (at App.js:56)
    in Switch (at App.js:54)
    in App (created by ConnectFunction)
    in ConnectFunction (at src/index.js:21)
    in Router (at src/index.js:20)
    in Provider (at src/index.js:19)
    in Index (at src/index.js:27)

[saini-g]

Thanks for pointing this out, will fix this in the next release.