使用 Material UI 和 React.js 正确显示步进器

Question

我尝试使用 React.js 和 Material Ui 显示一个带有“渐进式表单”的负责任的屏幕。 我为此使用了 Stepper 组件，但这不起作用，当我按下“下一步按钮”时，按钮已被隐藏，但没有显示带有“Teste”文本的下一步内容。 我的组件代码：

import React, { useState } from 'react';
import {
    Grid,
    TextField,
    Stepper,
    Step,
    StepLabel,
    AppBar,
    Toolbar,
    IconButton,
    Typography,
    Button
} from '@material-ui/core';

import BackIcon from '@material-ui/icons/ArrowBack';
import NextButton from './common/NextButton';

import { useStyles } from './styles';

const NewFarm = (props) => {
    const [currentStep, setCurrentStep] = useState(1);
    const classes = useStyles(props);
    const handleNext = () => {
        setCurrentStep(currentStep + 1);
    }
    return (
        <>
            <AppBar className={classes.bar}>
                <Toolbar>
                    <IconButton>
                        <BackIcon style={{ color: "white" }} />
                    </IconButton>
                    <Typography>Cadastro da Fazenda</Typography>
                </Toolbar>
            </AppBar>
                <Stepper style={{height: "100vh"}} activeStep={currentStep}>
                    <Step className={classes.step} key={1}>
                        <Typography id="farmName" className={classes.stepLabel}>Preencha o <br/>nome da fazenda</Typography>
                        <TextField size="medium" fullWidth={true} placeholder="Insira o nome aqui"/>
                        <NextButton onClick={handleNext}/>
                    </Step>
                    <Step key={2}>
                        Teste
                    </Step>
                </Stepper>
        </>
    )
};

export default NewFarm;

有人可以帮助我吗？

Answer 1

听起来您必须将步骤内容放入而不是纯文本。 尝试以下，

<Step key={1}>  
  <StepContent>                      
    <Typography id="farmName" className={classes.stepLabel}>Preencha o <br/>nome da fazenda</Typography>
  </StepContent>
</Step>
<Step key={2}>
  <StepContent>   
    <Typography id="farmName" className={classes.stepLabel}>Preencha o <br/>nome da fazenda333</Typography>
  </StepContent>   
</Step>