I'm running into an issue while attempting to build a Stepper component using MUI V5. The problem I am facing is the presence of a gap between the icons and the line connectors. Here's what my current setup looks like:
https://i.sstatic.net/UoMsU.png
This is the desired outcome I'm aiming for:
https://i.sstatic.net/DHwba.png
Below is the code snippet I am working with:
import * as React from "react";
import Box from "@mui/material/Box";
import Stepper from "@mui/material/Stepper";
import Step from "@mui/material/Step";
import { StepLabel, StepConnector } from "@mui/material";
import StepContent from "@mui/material/StepContent";
import Button from "@mui/material/Button";
import Paper from "@mui/material/Paper";
import Typography from "@mui/material/Typography";
import { styled } from "@mui/material/styles";
import RadioButtonCheckedIcon from "@mui/icons-material/RadioButtonChecked";
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
import CircleOutlinedIcon from "@mui/icons-material/CircleOutlined";
// Rest of the code remains unchanged
I attempted tweaking padding, margins of both MuiStep-root and MuiStepLabel-root classes, and setting a minHeight on MuiStepConnector-root, but unfortunately, the spacing persists. Any help or insight would be greatly appreciated.
Could someone offer guidance on this issue?