Overriding MUI Stepper styles in React 2022

user_17898592 0
Viewed 384

I've been struggling with the proper way to override styles for a React MUI Stepper component in 2022. More specifically in the active, and completed states for the label as well as the circle icon.

My Code

import { ThemeProvider } from '@mui/styles';
import { createTheme } from '@mui/system';

  const theme = createTheme({
    overrides: {
      MuiStepIcon: {
        root: {
          '&$completed': {
            color: 'pink',
          },
          '&$active': {
            color: 'red',
          },
        },
        active: {},
        completed: {},
      },
      MuiStepLabel: {
        root: {
          color: 'red'
        }
      }
    }
  })

          <ThemeProvider theme={theme}>
            <Stepper activeStep={activeStep} className='serviceReferralWizardStepper'>
              {steps.map((label) => {
                const stepProps = {};
                const labelProps = {};
                return (
                  <Step className='stepper-holder' style={{ margin: '0 1.8rem' }} key={label} {...stepProps}>
                    <StepLabel {...labelProps}><span className='serviceReferralWizardStepper__label'>{label}</span></StepLabel>
                  </Step>
                );
              })}
            </Stepper>

Currently I see no styles at all applied. Any advice would be apprecieted.

material-ui reactjs
1 Answers

I recommend looking at MUI's documentation example: https://v4.mui.com/components/steppers/#CustomizedSteppers.js


You will need to create custom components to represent the styles you want. 
const CustomeConnector = withStyles({
   active: {
      '& $line': {
          borderColor: '#784af4',
       },
   },
  completed: {
     '& $line': {
  borderColor: '#784af4',
     },
   },
})(StepConnector);

function CustomeStepIcon(props) {
  const classes = // create styles
  const { active, completed } = props;

  return (
    <div
      className={clsx(classes.root, {
        [classes.active]: active,
      })}
    >
      {completed ? <Check className={classes.completed} /> : <div className={classes.circle} />}
    </div>
  );
}

 <Stepper alternativeLabel activeStep={activeStep} connector={<CustomConnector />}>
    {steps.map((label) => (
      <Step key={label}>
        <StepLabel StepIconComponent={CustomStepIcon}>{label}</StepLabel>
      </Step>
    ))}
  </Stepper>

UPDATE
Here is an updated link to the v5 implementation: https://mui.com/components/steppers/#customized-horizontal-stepper

user_134308880
Related