如何解决为什么我的反应步进组件看起来很小?
我已经使用material-UI步进器在Drawer内容(也就是material-UI Drawer)内部制作了多步表格。但是当我使用步进代码时,它看起来像下面的图片。
那么,错误在哪里?
步进代码将如下所示:
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'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>
);
}
我刚刚改变了宽度。但这是行不通的。我该如何纠正此错误?
解决方法
我刚刚找到答案。在useStyles
(代码中的样式)中,我向根类添加了marginRight: 700,
。然后步进机伸展。
const useStyles = makeStyles((theme) => ({
root: {
width: '100%',marginRight: 700,},
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。