Passing classes inside component props

Question

I am migrating my project from MUI v4 to v5. I want to use the recommended emotion and styled component patterns. So I'm avoiding makeStyles() and withStyles(). I have a pattern like this:

import withStyles from '@mui/styles/withStyles';

const styles = (theme) => ({
  active: {
    color: `${theme.palette.secondary.main}`,
  },
  completed: {
    color: `${theme.palette.secondary.main}`,
  },
});

function MyComponent() {
  return (
    <Step>
      <StepLabel
        StepIconProps={{
          classes: {
            active: classes.active,
            completed: classes.completed,
          },
        }}
      >
        Some label
      </StepLabel>
    </Step>
  );
}

export default withStyles(styles)(MyComponent);

How can I dynamically control the active and completed classes using StepIconProps and emotion?

The styled() function expects a Component as the first argument, so I can't use that directly. I was thinking about using createStyles().

Answer 1

I ended up using the sx prop like this:

    function MyComponent() {
      return (
        <Step>
          <StepLabel
            StepIconProps={{
              sx: {
                "&.Mui-active": {
                  color: "secondary.main"
                },
                "&.Mui-completed": {
                  color: "secondary.main"
                },
              },
            }}
          >
            {label}
          </StepLabel>
        </Step>
      );
    }