[material-ui][Stepper] Add classes .Mui-active for MuiStep-root

[PunkFleet]

Summary

This is custom style, i add a rounded background color for MuiStep-root, but i found there not classes .Mui-active

Examples

'use client';
import styled from "@emotion/styled";
import { Step, StepConnector, StepIconProps, StepLabel, Stepper, stepClasses, stepConnectorClasses, stepLabelClasses, stepperClasses } from "@mui/material";
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import ReceiptIcon from '@mui/icons-material/Receipt';
import PaymentIcon from '@mui/icons-material/Payment';
import RedeemIcon from '@mui/icons-material/Redeem';

const steps = ['Billing Information', 'Payment Information', 'Order Confirmation'];

export default function Page({ }) {
    return (
        <CustomStepper  activeStep={1} connector={<Connector />}>
            {steps.map((label) => (
                <Step key={label} >
                    <CustomStepLabel StepIconComponent={StepIcon}>{label}</CustomStepLabel>
                </Step>
            ))}
        </CustomStepper>
    )
}
const CustomStepper = styled(Stepper)(() => ({
    [`& .${stepClasses.root}`]: {
        [`&.${stepLabelClasses.completed}`]: {
            backgroundColor: '#e1d5ff',
            padding: 8,
            border: '1px solid #e1d5ff',
            borderRadius: 20,
        },
        padding: 8,
        backgroundColor: 'rgb(245 245 245 /.8)',
        border: '1px solid rgb(245 245 245 /.8)',
        borderRadius: 20,
    }
}))
const CustomStepLabel = styled(StepLabel)(({ theme }) => ({
    [`& .${stepLabelClasses.label}`]: {
        [`&.${stepLabelClasses.completed}`]: {
            color: "#784af4"
        },
        [`&.${stepLabelClasses.active}`]: {
            color: "#784af4",
        },

        color: "gray",
        padding: 1,
    }
}));
const Connector = styled(StepConnector)(() => ({
    [`&.${stepConnectorClasses.alternativeLabel}`]: {
        top: 10,
        left: 'calc(-50% + 16px)',
        right: 'calc(50% + 16px)',
    },
    [`&.${stepConnectorClasses.active}`]: {
        [`& .${stepConnectorClasses.line}`]: {
            borderColor: '#784af4',
        },
    },
    [`&.${stepConnectorClasses.completed}`]: {
        [`& .${stepConnectorClasses.line}`]: {
            borderColor: '#784af4',
        },
    },
    [`& .${stepConnectorClasses.line}`]: {
        borderColor: '#eaeaf0',
        borderTopWidth: 3,
        borderRadius: 1,
    },
}));
const StepIconRoot = styled('div')<{ ownerState: { active?: boolean, completed?: boolean } }>(
    ({ ownerState }) => ({
        color: 'gray',
        display: 'flex',
        height: 22,
        alignItems: 'center',
        ...(ownerState.active && {
            color: '#784af4',
        }),
        ...(ownerState.completed && {
            color: '#784af4',
        }),
    }),
);

function StepIcon(props: StepIconProps) {
    const { active, completed, className } = props;
    const icons: { [index: string]: React.ReactElement } = {
        1: <ReceiptIcon />,
        2: <PaymentIcon />,
        3: <RedeemIcon />,
    };
    return (
        <StepIconRoot ownerState={{ completed, active }} className={className}>
            {completed ? (
                <CheckCircleIcon />
            ) : icons[String(props.icon)]
            }
        </StepIconRoot>
    );
}

Motivation

No response

Search keywords: stepper Mui-active MuiStep-root

[PunkFleet]

The class categories here look a bit confusing, and I accomplished the desired effect by specifying subclasses

<Stepper activeStep={0} connector={<Connector />}>
            {steps.map((label) => (
                <CustomStep key={label}>
                    <StepLabel StepIconComponent={StepIcon}>{label}</StepLabel>
                </CustomStep>
            ))}
        </Stepper>
        //........
const CustomStep = styled(Step)(({ theme }) => ({
    [`&.Mui-completed .${stepLabelClasses.root}`]: {
        backgroundColor: "#e1d5ff",
        borderRadius: 20,
        padding: 8,
        color: "#784af4",
    },
    [`& .${stepLabelClasses.root}`]: {
        backgroundColor: "#784af4",
        borderRadius: 20,
        padding: 8,

        color: "gray",
        [`&.${stepLabelClasses.disabled}`]: {
            backgroundColor: "rgb(0 0 0 /.3)",
            borderRadius: 20,
            padding: 8,
            color: "gray",
        },
    },
    [`& .${stepLabelClasses.label}`]: {
        [`&.${stepLabelClasses.completed}`]: {
            color: "#784af4",
            fontWeight: 600,
        },
        [`&.${stepLabelClasses.active}`]: {
            color: "white",
            fontWeight: 600,
        },
        [`&.${stepLabelClasses.disabled}`]: {
            color: "white",
            fontWeight: 600,
        },
        color: "gray",
        padding: 1,
        fontWeight: 600,
    },
}));