物料UI - stepper中的按钮

Question

我想有一个可点击的元素从Material UI的stepper的一步。元素应该始终可见，而不仅仅是当步骤处于活动状态时才可见。由于UX原因，无法将所有步骤设置为活动。

这是我尝试过的：

<Step key={x.id}>
    <StepButton completed={false} onClick={() => xxx()}>
        {title}
    </StepButton>
    <div style={{ display: "flex", justifyContent: "center" }}>
        <IconButton onClick={(e) => show()}>
            <InfoIcon />
        </IconButton>
    </div>
</Step>

但是似乎在一个步骤中有一个div是不允许的。我在div的行中收到错误(例如，Warning:接收到活动的非布尔属性的true。)

然后我试着把图标放在StepButton标签里：

<Step key={x.id}>
    <StepButton completed={false} onClick={() => xxx()}>
        {title}
        <IconButton onClick={(e) => show()}>
            <InfoIcon />
        </IconButton>
    </StepButton>
</Step>

但这也是不可能的，因为按钮中的按钮是不允许的。

有没有其他方法可以在一个步骤中使用可点击元素(如IconButton)？

Answer 1

您可以在StepLabel中放置一个按钮：

import { Step, StepLabel, StepContent, Button } from "@material-ui/core";

如下所示：

<Step key={x.id}>
    <StepLabel
        onClick={() => handleStep(x.id)}
        completed={completed}
    >
        {title}
        <Button
            onClick={(e)=>{
            console.log("Button Pressed")}
            }
        >
            {"Button"}
        </Button>
    </StepLabel>
    <StepContent>
        {"Content hidden when not active"}
    </StepContent>
</Step>

如果要阻止按钮打开步骤，可以添加e.stopPropagation()