Reactjs 为什么我的反应步进组件看起来很小？

我使用material UI stepper在抽屉内容内部制作了多步骤表单，这也是一个material UI抽屉。但是当我使用步进代码时，它看起来像下图

那么，错误在哪里

步进器代码如下所示：

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Stepper from '@material-ui/core/Stepper';
import Step from '@material-ui/core/Step';
import StepButton from '@material-ui/core/StepButton';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';

const useStyles = makeStyles((theme) => ({
    root: {
        width: '100%',
        
    },
    button: {
        marginRight: theme.spacing(1),
    },
    backButton: {
        marginRight: theme.spacing(1),
    },
    completed: {
        display: 'inline-block',
    },
    instructions: {
        marginTop: theme.spacing(1),
        marginBottom: theme.spacing(1),
    },
}));

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

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

export default function HorizontalNonLinearAlternativeLabelStepper() {
    const classes = useStyles();
    const [activeStep, setActiveStep] = React.useState(0);
    const [completed, setCompleted] = React.useState(new Set());
    const [skipped, setSkipped] = React.useState(new Set());
    const steps = getSteps();

    const totalSteps = () => {
        return getSteps().length;
    };

    const isStepOptional = (step) => {
        return step === 1;
    };

    const handleSkip = () => {
        if (!isStepOptional(activeStep)) {
            // You probably want to guard against something like this
            // it should never occur unless someone's actively trying to break something.
            throw new Error("You can't skip a step that isn't optional.");
        }

        setActiveStep((prevActiveStep) => prevActiveStep + 1);
        setSkipped((prevSkipped) => {
            const newSkipped = new Set(prevSkipped.values());
            newSkipped.add(activeStep);
            return newSkipped;
        });
    };

    const skippedSteps = () => {
        return skipped.size;
    };

    const completedSteps = () => {
        return completed.size;
    };

    const allStepsCompleted = () => {
        return completedSteps() === totalSteps() - skippedSteps();
    };

    const isLastStep = () => {
        return activeStep === totalSteps() - 1;
    };

    const handleNext = () => {
        const newActiveStep =
            isLastStep() && !allStepsCompleted()
                ? // It's the last step, but not all steps have been completed
                // find the first step that has been completed
                steps.findIndex((step, i) => !completed.has(i))
                : activeStep + 1;

        setActiveStep(newActiveStep);
    };

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

    const handleStep = (step) => () => {
        setActiveStep(step);
    };

    const handleComplete = () => {
        const newCompleted = new Set(completed);
        newCompleted.add(activeStep);
        setCompleted(newCompleted);

        /**
         * Sigh... it would be much nicer to replace the following if conditional with
         * `if (!this.allStepsComplete())` however state is not set when we do this,
         * thus we have to resort to not being very DRY.
         */
        if (completed.size !== totalSteps() - skippedSteps()) {
            handleNext();
        }
    };

    const handleReset = () => {
        setActiveStep(0);
        setCompleted(new Set());
        setSkipped(new Set());
    };

    const isStepSkipped = (step) => {
        return skipped.has(step);
    };

    function isStepComplete(step) {
        return completed.has(step);
    }

    return (
        <div className={classes.root}>
            <Stepper alternativeLabel nonLinear activeStep={activeStep}>
                {steps.map((label, index) => {
                    const stepProps = {};
                    const buttonProps = {};
                    if (isStepOptional(index)) {
                        buttonProps.optional = <Typography variant="caption">Optional</Typography>;
                    }
                    if (isStepSkipped(index)) {
                        stepProps.completed = false;
                    }
                    return (
                        <Step key={label} {...stepProps}>
                            <StepButton
                                onClick={handleStep(index)}
                                completed={isStepComplete(index)}
                                {...buttonProps}
                            >
                                {label}
                            </StepButton>
                        </Step>
                    );
                })}
            </Stepper>
            <div>
                {allStepsCompleted() ? (
                    <div>
                        <Typography className={classes.instructions}>
                            All steps completed - you&apos;re finished
            </Typography>
                        <Button onClick={handleReset}>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}
                                >
                                    Next
              </Button>
                                {isStepOptional(activeStep) && !completed.has(activeStep) && (
                                    <Button
                                        variant="contained"
                                        color="primary"
                                        onClick={handleSkip}
                                        className={classes.button}
                                    >
                                        Skip
                                    </Button>
                                )}

                                {activeStep !== steps.length &&
                                    (completed.has(activeStep) ? (
                                        <Typography variant="caption" className={classes.completed}>
                                            Step {activeStep + 1} already completed
                                        </Typography>
                                    ) : (
                                            <Button variant="contained" color="primary" onClick={handleComplete}>
                                                {completedSteps() === totalSteps() - 1 ? 'Finish' : 'Complete Step'}
                                            </Button>
                                        ))}
                            </div>
                        </div>
                    )}
            </div>
        </div>
    );
}

从“React”导入React；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/core/Stepper”导入步进器；
从“@material ui/core/Step”导入步骤；
从“@material ui/core/StepButton”导入步骤按钮；
从“@material ui/core/Button”导入按钮；
从“@material ui/core/Typography”导入排版；
const useStyles=makeStyles（（主题）=>({
根目录：{
宽度：“100%”，
},
按钮：{
边缘光：主题。间距（1），
},
后按钮：{
边缘光：主题。间距（1），
},
已完成：{
显示：“内联块”，
},
说明：{
marginTop：主题。间距（1），
marginBottom：主题。间距（1），
},
}));
函数getSteps（）{
返回[“选择活动设置”、“创建广告组”、“创建广告”]；
}
函数getStepContent（步骤）{
开关（步骤）{
案例0：
返回“步骤1：选择活动设置…”；
案例1：
返回“第2步：什么是广告群？”；
案例2：
return‘步骤3：这是我真正关心的一点！’；
违约：
返回“未知步骤”；
}
}
导出默认函数水平非线性可选ElabelStepper（）{
const classes=useStyles（）；
const[activeStep，setActiveStep]=React.useState（0）；
const[completed，setCompleted]=React.useState（new Set（））；
const[skipped，setSkipped]=React.useState（new Set（））；
const steps=getSteps（）；
常量totalSteps=（）=>{
返回getSteps（）.length；
};
常量isStepOptional=（步骤）=>{
返回步骤===1；
};
常量handleSkip=（）=>{
如果（！IsStep可选（activeStep））{
//你可能想防范类似的事情
//除非有人正积极地试图打破某些东西，否则它永远不会发生。
抛出新错误（“不能跳过非可选步骤”）；
}
setActiveStep（（prevActiveStep）=>prevActiveStep+1）；
设置跳过（（先前跳过）=>{
const newskiped=新集合（prevSkipped.values（））；
添加（activeStep）；
返回新闻稿；
});
};
常量skippedSteps=（）=>{
返回0.size；
};
const completedSteps=（）=>{
返回已完成的大小；
};
const allStepsCompleted=（）=>{
返回completedSteps（）==totalSteps（）-skippedSteps（）；
};
常量isLastStep=（）=>{
返回activeStep==totalSteps（）-1；
};
常量handleNext=（）=>{
常数newActiveStep=
isLastStep（）&&！allStepsCompleted（）
？//这是最后一步，但并非所有步骤都已完成
//找到已完成的第一步
steps.findIndex（（步骤，i）=>！completed.has（i））
：activeStep+1；
setActiveStep（newActiveStep）；
};
常量把手=（）=>{
setActiveStep（（prevActiveStep）=>prevActiveStep-1）；
};
常量handleStep=（步长）=>（）=>{
设置活动步骤（步骤）；
};
常量handleComplete=（）=>{
const newCompleted=新设置（已完成）；
newCompleted.add（activeStep）；
设置完成（新完成）；
/**
*唉…如果有条件的话，最好用
*`if（！this.allStepsComplete（））`但是在执行此操作时未设置状态，
*因此，我们不得不求助于不太干燥的环境。
*/
如果（completed.size！==totalSteps（）-skippedSteps（））{
handleNext（）；
}
};
常量handleReset=（）=>{
setActiveStep（0）；
已完成设置（新设置（））；
setskiped（新的Set（））；
};
常量isStepSkipped=（步骤）=>{
返回跳过。has（步骤）；
};
函数isStepComplete（步骤）{
返回已完成。has（步骤）；
}
返回(
{steps.map（（标签，索引）=>{
const stepProps={}；
常量按钮操作={}；
if（可选（索引））{
buttonProps.optional=可选；
}
如果（已跳过（索引））{
stepProps.completed=false；
}
返回(
{label}
);
})}
{allStepsCompleted（）(
所有步骤已完成-您已完成
重置
) : (
{getStepContent（activeStep）}
返回
下一个
{isStepOptional（activeStep）&&！completed.has（activeStep）&&(
跳过
)}
{activeStep！==steps.length&&
（已完成。是否有（activeStep）(
步骤{activeStep+1}已完成
const useStyles = makeStyles((theme) => ({
    root: {
        width: '100%',
        marginRight: 700,
    },