Material UI - 步进器步骤中的按钮

Question

我想在 Material UI 的步进器的一步中有一个可点击的元素。该元素应该始终可见，而不仅仅是在步骤处于活动状态时可见。由于 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 的行中收到错误（例如警告：已收到 true 非布尔属性活动。）

然后我尝试将图标放在 StepButton 标签中：

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

但这也不可能，因为Buttons inside Buttons是不允许的。

是否有任何其他方法可以在一个步骤中使用可点击元素（如 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()

Material UI - 步进器步骤中的按钮

Material UI - Button inside stepper step

reactjs

material-ui

stepper