How to apply a custom className to StepPositionIcon?

[bousejin]

I am trying to customize a vertical stepper like this:

const theme = createMuiTheme({

  overrides: {
    MuiStepConnector: {
      lineVertical: {
        minHeight: '',
      }
    },
    MuiStepContent: {
      last: {
        borderLeft: ''
      },
    },
    MuiStepIcon: {
      root: {
        '&$active': {
          color: "#fff",
          boxShadow: "0 0 20px rgba(0, 0, 0, 0.14)",
          borderRadius: "100px",
        },
      },
    },
    MuiExpansionPanelSummary: {
      expandIcon: {
        left: 8 * -2,
        transition: 'all .5s ease',
      }
    }
  }
});

But I cannot override StepPositionIcon properties like:

text: {
    fill: theme.palette.primary.contrastText,
    fontSize: theme.typography.caption.fontSize,
    fontFamily: theme.typography.fontFamily
}

I want to apply a custom className to StepPositionIcon but don't know where to apply this change? in Stepper, Step or StepLabel?

Your Environment

Tech	Version
Material-UI	v1.2.1
React	16.4.0
browser	Chrome
etc

[oliviertassinari]

@bousejin The StepPositionIcon component is private, it might change in the future. You can't target it directly:
https://github.com/mui-org/material-ui/blob/5798bf644981a22459469e8bfb5d50f5287ab560/packages/material-ui/src/StepIcon/StepPositionIcon.js#L19

[bousejin]

@oliviertassinari Thank you so much. I have some card inside a stepper that should be ordered, but I want the StepIcon background to be of a white color and the number in it to be of a blue one.

<MuiThemeProvider theme={theme}>
        <Stepper activeStep={activeStep} orientation="vertical">
          {cards.map((prop, key) => {
            return (
              <Step key={key}>
                <StepLabel active></StepLabel>
                <StepContent TransitionComponent="None">
                  <Card className={classes.card}>
                    <div className={classes.details}>
                      <CardMedia
                        className={
                          classes.cover + " " +
                          classes.imgRaised + " " +
                          classes.imgRounded + " " +
                          classes.imgFluid
                        }
                        image={prop.image}
                        title={prop.title}
                      />
                      <CardContent className={classes.content}>
                        <Typography variant="subheading">
                          <a href={prop.link} className={classes.a} target="_blank">
                            {prop.title}
                          </a>
                        </Typography>
                        <Typography variant="body1">
                          {prop.authors}
                        </Typography>
                        <Typography variant="body1" color="textSecondary">
                          {prop.venue}
                        </Typography>
                      </CardContent>
                    </div>
                    <div className={classes.controls}>
                      <ExpansionPanel>
                        <ExpansionPanelSummary
                          className={classes.abstract}
                          expandIcon={<ExpandMoreIcon className={classes.icon} />}>
                          <a className={classes.a + " " + classes.heading}>Abstract</a>
                        </ExpansionPanelSummary>
                        <ExpansionPanelDetails>
                          <Typography>
                            {prop.abstract}
                          </Typography>
                        </ExpansionPanelDetails>
                      </ExpansionPanel>
                    </div>
                  </Card>

                </StepContent>
              </Step>
            );
          })}
        </Stepper>
      </MuiThemeProvider>

[oliviertassinari]

@bousejin Alright, I think that the best approach to fix the issue is to remove the StepPositionIcon component. We can merge the source code of this component with the StepIcon component.
It should be much simpler this way.
Do you want to work on it? :)

[bousejin]

@oliviertassinari Thanks again. I want but my knowledge of react is at the beginner level:) After looking at the StepIcon and StepPositionIcon components, I've merged these components like below, but didn't test it:(

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import CheckCircle from '../internal/svg-icons/CheckCircle';
import Warning from '../internal/svg-icons/Warning';
import withStyles from '../styles/withStyles';
import SvgIcon from '../SvgIcon';

export const styles = theme => ({
  root: {
    display: 'block',
    color: theme.palette.text.disabled,
    '&$active': {
      color: theme.palette.primary.main,
    },
    '&$completed': {
      color: theme.palette.primary.main,
    },
    '&$error': {
      color: theme.palette.error.main,
    },
  },
  text: {
    fill: theme.palette.primary.contrastText,
    fontSize: theme.typography.caption.fontSize,
    fontFamily: theme.typography.fontFamily,
  },
  active: {},
  completed: {},
  error: {},
});

function StepIcon(props) {
  const { completed, icon, active, error, classes } = props;

  if (typeof icon === 'number' || typeof icon === 'string') {
    if (error) {
      return <Warning className={classNames(classes.root, classes.error)} />;
    }
    if (completed) {
      return <CheckCircle className={classNames(classes.root, classes.completed)} />;
    }
    return (
      <SvgIcon
        className={classNames(classes.root, {
          [classes.active]: active,
        })}
      >
        <circle cx="12" cy="12" r="12" />
        <text className={classes.text} x="12" y="16" textAnchor="middle">
          {icon}
        </text>
      </SvgIcon>
    );
  }

  return icon;
}

StepIcon.propTypes = {
  /**
   * Whether this step is active.
   */
  active: PropTypes.bool,
  /**
   * Override or extend the styles applied to the component.
   * See [CSS API](#css-api) below for more details.
   */
  classes: PropTypes.object.isRequired,
  /**
   * Mark the step as completed. Is passed to child components.
   */
  completed: PropTypes.bool,
  /**
   * Mark the step as failed.
   */
  error: PropTypes.bool,
  /**
   * The icon displayed by the step label.
   */
  icon: PropTypes.node.isRequired,
};

StepIcon.defaultProps = {
  active: false,
  completed: false,
  error: false,
};

export default withStyles(styles, { name: 'MuiStepIcon' })(StepIcon);

[oliviertassinari]

@bousejin This looks good. Do you want to submit a pull request? I will help with the missing parts.

[bousejin]

@oliviertassinari I submitted a pull request.