Currently trying to figure out how to render the styles(without having to do inline styles) from the styles object for the stepper component. However, it is giving me an error when I try to do something similar to what Material UI's demo gave me. I took bits and pieces from it basically and tried to implement it in my code. Here is what Material UI's demo looks like which I want to replicate as well.

And here is the code they have

const ColorlibStepIconRoot = styled('div')(({ theme, ownerState }) => ({
  backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[700] : '#ccc',
  zIndex: 1,
  color: '#fff',
  width: 50,
  height: 50,
  display: 'flex',
  borderRadius: '50%',
  justifyContent: 'center',
  alignItems: 'center',
  ...(ownerState.active && {
    backgroundImage:
      'linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)',
    boxShadow: '0 4px 10px 0 rgba(0,0,0,.25)',
  }),
  ...(ownerState.completed && {
    backgroundImage:
      'linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)',
  }),
}));

function ColorlibStepIcon(props) {
  const { active, completed, className } = props;

  const icons = {
    1: <SettingsIcon />,
    2: <GroupAddIcon />,
    3: <VideoLabelIcon />,
  };

  return (
    <ColorlibStepIconRoot ownerState={{ completed, active }} className={className}>
      {icons[String(props.icon)]}
    </ColorlibStepIconRoot>
  );
}

I figured I could scrap the HOC component(color step icon root) and just do without root. Also, they are importing styled from

import { styled } from '@mui/material/styles';

Which when I try to do, its undefined. So I tried to use it in the styles object the way Ive been always doing with withStyles.

But am getting this error:

Here is my code:

import React from 'react';
import { Typography } from '@material-ui/core';
import { withStyles } from '@material-ui/core/styles';
import Stepper from '@material-ui/core/Stepper';
import Step from '@material-ui/core/Step';
import StepLabel from '@material-ui/core/StepLabel';
import Icon from '@material-ui/core/Icon';
import PropTypes from 'prop-types';


const styles = theme => ({
  stepLabelRoot: {
    fontWeight: 'bold',
    color: '#fff',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center'
  },
  checklistHeader: {
    fontWeight: 'bold',
    marginTop: '80px',
    color: 'white'
  },
  connectorIcon: {
    color: theme.palette.text.secondary
  },
  active: {
    backgroundColor: 'green'
  },
  stepper: {
    background: 'none',
    fontWeight: 'bold',
    height: '500px'
  },
  checklistImage: {
    width: '42px',
    height: '42px'
  }
});

const steps = ['Are you there?', 'Adopt', 'Buy'];


const Checklist = ({ classes }) => {
  const ColorlibStepIcon = ({
    icon, completed, className, classes, theme
  }) => {
    const icons = {
      1: <img className={classes.checkListImage} src="https://i.pinimg.com/474x/be/54/bd/be54bd5e8e9c23e3ce570ff2acae592d.jpg" alt="check" />,
      2: <img className={classes.checkListImage} src="https://i.pinimg.com/474x/be/54/bd/be54bd5e8e9c23e3ce570ff2acae592d.jpg" alt="check" />,
      3: <img className={classes.checkListImage} src="https://i.pinimg.com/474x/be/54/bd/be54bd5e8e9c23e3ce570ff2acae592d.jpg" />,
    };

    return (
      <div ownerState={{ completed }} className={className}>
        {icons[String(icon)]}
      </div>
    );
  };
  return (
    <React.Fragment>
      <Typography variant="h6" align="center" gutterBottom className={classes.checklistHeader}>Check the following</Typography>
      <Stepper alternativeLabel activeStep={2} className={classes.stepper}>
        {steps.map(label => (
          <Step key={label}>
            <StepLabel classes={{ root: classes.stepLabelRoot }} StepIconComponent={ColorlibStepIcon}>
              <div className={classes.stepLabelRoot}>
                {label}
              </div>
              <span>
                Lorem Ipsum
              </span>
            </StepLabel>
          </Step>
        ))}
      </Stepper>
    </React.Fragment>
  );
};

Checklist.defaultProps = {

};

Checklist.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles, { withTheme: true })(Checklist);

CodePudding user response：

You have 2 bugs in your code. In your icon component:

<img className={classes.checkListImage}

The rule name you defined above is called checklistImage not checkListImage, so change it to:

<img className={classes.checklistImage}

Secondly, the classes from the Checklist component is shadowed by the classes inside ColorlibStepIcon:

const ColorlibStepIcon = ({
  icon,
  completed,
  className,
  theme,
  /*classes <-- this classes is undefined which shadows the real classes
   passing from above, so remove it */
}) => {