Javascript React.js，物料界面步进器方向

我在这里遇到了一个奇怪的情况，我试图在我的应用程序中构建一个步进器组件。 到目前为止一切都很顺利，但我试着让这个步进器从右向左移动。 我尝试过的事情： 我试图安装i18next（翻译库），但没有成功。 我试着从3降到2，这也不是一个令人满意的结果

结果如下：

这是我的代码：

import {
  makeStyles,
  Theme,
  createStyles,
  withStyles,
} from '@material-ui/core/styles';
import clsx from 'clsx';
import Stepper from '@material-ui/core/Stepper';
import Step from '@material-ui/core/Step';
import StepLabel from '@material-ui/core/StepLabel';
import SettingsIcon from '@material-ui/icons/Settings';
import GroupAddIcon from '@material-ui/icons/GroupAdd';
import VideoLabelIcon from '@material-ui/icons/VideoLabel';
import StepConnector from '@material-ui/core/StepConnector';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import { StepIconProps } from '@material-ui/core/StepIcon';

const ColorlibConnector = withStyles({
  alternativeLabel: {
    top: 22,
  },
  active: {
    '& $line': {
      backgroundImage:
        'linear-gradient( 95deg,rgb(242,113,33) 0%,rgb(233,64,87) 50%,rgb(138,35,135) 100%)',
    },
  },
  completed: {
    '& $line': {
      backgroundImage:
        'linear-gradient( 95deg,rgb(242,113,33) 0%,rgb(233,64,87) 50%,rgb(138,35,135) 100%)',
    },
  },
  line: {
    height: 3,
    border: 0,
    backgroundColor: '#eaeaf0',
    borderRadius: 1,
  },
})(StepConnector);

const useColorlibStepIconStyles = makeStyles({
  root: {
    backgroundColor: '#ccc',
    zIndex: 1,
    color: '#fff',
    width: 50,
    height: 50,
    display: 'flex',
    borderRadius: '50%',
    justifyContent: 'center',
    alignItems: 'center',
  },
  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)',
  },
  completed: {
    backgroundImage:
      'linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)',
  },
});

function ColorlibStepIcon(props: StepIconProps) {
  const classes = useColorlibStepIconStyles();
  const { active, completed } = props;

  const icons: { [index: string]: React.ReactElement } = {
    1: <SettingsIcon />,
    2: <GroupAddIcon />,
    3: <VideoLabelIcon />,
  };

  return (
    <div
      className={clsx(classes.root, {
        [classes.active]: active,
        [classes.completed]: completed,
      })}
    >
      {icons[String(props.icon)]}
    </div>
  );
}

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      width: '100%',
      display: 'flex',
      alignItems: 'center',
      flexDirection: 'column',
    },
    button: {
      marginRight: theme.spacing(1),
    },
    instructions: {
      marginTop: theme.spacing(1),
      marginBottom: theme.spacing(1),
    },
    stepperContainer: {
      width: '100%',
    },
    contentContainer: {
      width: '50%',
      display: 'flex',
      justifyContent: 'center',
    },
  })
);

function getSteps() {
  return ['Select campaign settings', 'Create an ad group', 'Create an ad'];
}

function getStepContent(step: number) {
  switch (step) {
    case 0:
      return 'Select campaign settings...';
    case 1:
      return 'What is an ad group anyways?';
    case 2:
      return 'This is the bit I really care about!';
    default:
      return 'Unknown step';
  }
}

const SignUp: React.FC = () => {
  const classes = useStyles();
  const [activeStep, setActiveStep] = React.useState(0);
  const steps = getSteps();

  const handleNext = () => {
    setActiveStep((prevActiveStep) => prevActiveStep + 1);
  };

  const handleBack = () => {
    setActiveStep((prevActiveStep) => prevActiveStep - 1);
  };

  const handleReset = () => {
    setActiveStep(0);
  };

  return (
    <div className={classes.root}>
      <div className={classes.stepperContainer}>
        <Stepper
          dir="rtl"
          alternativeLabel
          activeStep={activeStep}
          connector={<ColorlibConnector />}
        >
          {steps.map((label) => (
            <Step key={label}>
              <StepLabel StepIconComponent={ColorlibStepIcon}>
                {label}
              </StepLabel>
            </Step>
          ))}
        </Stepper>
      </div>

      <div className={classes.contentContainer}>
        <div>
          {activeStep === steps.length ? (
            <div>
              <Typography className={classes.instructions}>
                All steps completed - you&apos;re finished
              </Typography>
              <Button onClick={handleReset} className={classes.button}>
                Reset
              </Button>
            </div>
          ) : (
            <div>
              <Typography className={classes.instructions}>
                {getStepContent(activeStep)}
              </Typography>
              <div>
                <Button
                  disabled={activeStep === 0}
                  onClick={handleBack}
                  className={classes.button}
                >
                  Back
                </Button>
                <Button
                  variant="contained"
                  color="primary"
                  onClick={handleNext}
                  className={classes.button}
                >
                  {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
                </Button>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default SignUp;

导入{
制作风格，
主题
创建样式，
用方式,，
}来自“@material ui/core/styles”；
从“clsx”导入clsx；
从“@material ui/core/Stepper”导入步进器；
从“@material ui/core/Step”导入步骤；
从“@material ui/core/StepLabel”导入StepLabel；
从“@material ui/icons/Settings”导入设置图标；
从“@material ui/icons/GroupAdd”导入GroupAddIcon；
从“@material ui/icons/VideoLabel”导入VideoLabelIcon；
从“@material ui/core/StepConnector”导入StepConnector；
从“@material ui/core/Button”导入按钮；
从“@material ui/core/Typography”导入排版；
从“@material ui/core/StepIcon”导入{StepIconProps}；
const ColorlibConnector=withStyles({
备选标签：{
排名：22，
},
活动：{
“&$line”：{
背景图片：
‘线性梯度（95度，rgb（242113,33）0%，rgb（233,64,87）50%，rgb（138,35135）100%。’，
},
},
已完成：{
“&$line”：{
背景图片：
‘线性梯度（95度，rgb（242113,33）0%，rgb（233,64,87）50%，rgb（138,35135）100%。’，
},
},
行：{
身高：3，
边界：0，
背景颜色：“#EAF0”，
边界半径：1，
},
})（步进连接器）；
const useColorlibStepIconStyles=makeStyles({
根目录：{
背景颜色：“#ccc”，
zIndex:1，
颜色：“#fff”，
宽度：50，
身高：50，
显示：“flex”，
边界半径：“50%”，
为内容辩护：“中心”，
对齐项目：“居中”，
},
活动：{
背景图片：
‘线性梯度（136度，rgb（242113,33）0%，rgb（233,64,87）50%，rgb（138,35135）100%。’，
boxShadow:'0 4px 10px 0 rgba（0,0,0,25）'，
},
已完成：{
背景图片：
‘线性梯度（136度，rgb（242113,33）0%，rgb（233,64,87）50%，rgb（138,35135）100%。’，
},
});
函数ColorlibStepIcon（道具：StepIconProps）{
const classes=useColorlibStepIconStyles（）；
const{active，completed}=props；
常量图标：{[index:string]：React.ReactElement}={
1: ,
2: ,
3: ,
};
返回(
{icons[String（props.icon）]}
);
}
const useStyles=makeStyles（（主题：主题）=>
创建样式({
根目录：{
宽度：“100%”，
显示：“flex”，
对齐项目：“居中”，
flexDirection:'列'，
},
按钮：{
边缘光：主题。间距（1），
},
说明：{
marginTop：主题。间距（1），
marginBottom：主题。间距（1），
},
步进容器：{
宽度：“100%”，
},
内容容器：{
宽度：“50%”，
显示：“flex”，
为内容辩护：“中心”，
},
})
);
函数getSteps（）{
返回[“选择活动设置”、“创建广告组”、“创建广告”]；
}
函数getStepContent（步骤：编号）{
开关（步骤）{
案例0：
返回“选择活动设置…”；
案例1：
返回“什么是广告群？”；
案例2：
return‘这是我真正关心的一点！’；
违约：
返回“未知步骤”；
}
}
常量注册：React.FC=（）=>{
const classes=useStyles（）；
const[activeStep，setActiveStep]=React.useState（0）；
const steps=getSteps（）；
常量handleNext=（）=>{
setActiveStep（（prevActiveStep）=>prevActiveStep+1）；
};
常量把手=（）=>{
setActiveStep（（prevActiveStep）=>prevActiveStep-1）；
};
常量handleReset=（）=>{
setActiveStep（0）；
};
返回(
{steps.map（（标签）=>(
{label}
))}
{activeStep===steps.length(
所有步骤已完成-您已完成
重置
) : (
{getStepContent（activeStep）}
返回
{activeStep===steps.length-1？'Finish'：'Next'}
)}
);
};
导出默认注册；

嗨，我在摆弄材质UI沙盒，

我改变的是：

• 第43行-初始化第2步
• 第62行-handleNext，prevActiveStep-1（从+1开始）
• 第67行-车把靠背，前主动踏板+1（从-1开始）
• 第86行-setActiveStep（2）（来自setActiveStep（0））
• 步进器组件：

{steps.map（（标签，索引）=>{
常量stepProps:{已完成？：布尔值}={
完成：activeStep