Material-UI progress/spinner

Question

所以我想在按钮上放置一个微调器

我的第一个设置工作正常，但当微调器出现时它扭曲了按钮。

这是第一个设置

    <Button
        ....
        disabled={isSubmitting}
        startIcon={isSubmitting ? <CircularProgress size="1rem" /> : undefined}
    >
        {isLastStep ? "Submit" : "Next"}
    </Button>

正如我所说，微调器拉长了按钮。

现在我要做的是在 isSubmitting 为真时用微调器替换“提交”文本。

这是我尝试过的一些变体，但 none 对我有用

<Button
    ....
    disabled={isSubmitting}
    // startIcon={isSubmitting ? <CircularProgress size="1rem" /> : undefined}
>
    {/* {!isLastStep && "Next"} */}
    {/* {isLastStep ? "Submit" : isSubmitting && <CircularProgress size={14} />} */}
    {/* {!isSubmitting && "Click Me"} */}
    {/* {isSubmitting ? <CircularProgress size={14} /> : "Submit"} */}
    {/* {isLastStep ? "Submit" && isSubmitting && <CircularProgress size={14} /> : "Next"} */}
    {/* {isLastStep ? "Submit" && isSubmitting && <CircularProgress size={14} /> : "Next"} */}
    {/* {isSubmitting && <CircularProgress size={14} />} */}
    {!isLastStep ? "Next" : (!isSubmitting && "Submit")(isSubmitting && <CircularProgress size={14} />)}
</Button>

以前有人遇到过这个问题吗？

Answer 1

试试这个 {isSubmitting ? <CircularProgress size={14} /> : !isLastStep ? "Next" : "Submit"}

Material-UI progress/spinner

Material-UI progress/spinner

web-frontend

reactjs

material-ui