How to Connect Dots with a Line in Material-UI Stepper

When working with Material-UI Steppers, specifically the “small dot stepper,” you may encounter the challenge of connecting the dots with a line. By default, Material-UI does not provide a built-in solution for this. However, there is a workaround that you can implement to achieve the desired effect.

Implementing a Custom Line Connector

To connect the dots with a line in the Material-UI Stepper, you can create a custom line connector using pseudo-elements (::before and ::after). Although this solution is not responsive, it can serve your needs in many cases. Here’s how you can do it:

1. Add Custom CSS Classes: First, add the necessary CSS classes to your stepper component. These classes will be used to style the line connector. For example:

code





import styles from "./styles";
import { makeStyles } from "@material-ui/core";

const useStyles = makeStyles(styles);

const classes = useStyles();

2. Style the Line Connector: Define the styles for the line connector using CSS. You can use the ::before and ::after pseudo-elements to create the line. Here’s an example:

code
























.MuiStepConnector-line {
  position: relative;
  width: 1px;
  background-color: #eaeaf0;
}

.MuiStepConnector-line:before {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #2e5bff;
}

.MuiStepConnector-line:after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #2e5bff;
}

3. Apply the Custom Styles: Finally, apply the custom styles to the line connector in your stepper component. This can be done by adding the classes prop to the StepConnector component and passing the custom class name. For example:

code





<Stepper
  orientation="vertical"
  connector={<StepConnector classes={{ line: classes.MuiStepConnectorLine }} />}
>
  {/* Steps */}
</Stepper>

By following these steps, you can create a custom line connector that connects the dots in the Material-UI Stepper. Remember to adjust the CSS styles according to your specific design requirements.

Customizing Material-UI Stepper with a Connected Line

Material-UI Stepper is a powerful component that allows you to create step-by-step progress indicators in your application. However, sometimes you may want to customize the appearance of the stepper, such as connecting the dots with a line. In this blog post, we will explore how to achieve this customization using Material-UI.

Creating a Custom Stepper Component

To customize the Material-UI Stepper and connect the dots with a line, you can create a custom stepper component. Here’s a step-by-step guide:

Step 1: Import the required dependencies To get started, import the necessary components and styles from Material-UI:

code


import React from 'react';
import { makeStyles, withStyles } from '@material-ui/core/styles';
import { Stepper, Step, StepLabel, StepConnector } from '@material-ui/core';

Define the styles for the custom stepper

Create a makeStyles hook to define the styles for your custom stepper:

code


const useStyles = makeStyles((theme) => ({
  // Add your custom styles here
}));

Create a custom step connector

Next, create a custom step connector component using the withStyles higher-order component (HOC). This component will be responsible for connecting the dots with a line:

code




const CustomStepConnector = withStyles((theme) => ({
  line: {
    // Customize the line styles here
  },
}))(StepConnector);

Define the custom stepper component

Now, define your custom stepper component by wrapping the Material-UI Stepper component with your custom styles and connectors:

code












const CustomStepper = () => {
  const classes = useStyles();

  return (
    <Stepper
      className={classes.stepper}
      connector={<CustomStepConnector />}
      // Add any additional props you need
    >
      {/* Add your steps here */}
    </Stepper>
  );
};

Customize the styles and connectors

In the makeStyles hook, add your custom styles for the stepper and the step connector:

code












const useStyles = makeStyles((theme) => ({
  stepper: {
    // Add your custom styles for the stepper here
  },
}));

// ...

const CustomStepConnector = withStyles((theme) => ({
  line: {
    // Add your custom styles for the line connector here
  },
}))(StepConnector);

Implement the custom stepper in your application

Finally, use your custom stepper component in your application, replacing the default Material-UI Stepper:

code








const App = () => {
  // Your application code

  return (
    <div>
      {/* Your other components */}
      <CustomStepper />
    </div>
  );
};

Conclusion

Although Material-UI does not provide a direct solution for connecting the dots with a line in the Stepper component, you can implement a custom line connector using CSS. By adding custom CSS classes, styling the line connector with pseudo-elements, and applying the styles to the StepConnector component, you can achieve the desired effect. Remember to adjust the styles to match your specific design needs.