Question

我想在Material UI的步进器的一步之内有一个clickable元素。该元素应始终可见，而不仅是在激活步骤时。由于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的非布尔属性有效。）

然后我尝试将Icon放在StepButton标记中：

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

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

还有其他方法可以一步使用可点击元素（例如IconButton）吗？

Answer 1

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

Class Error < StandardError
end

像这样放置：

class Error < StandardError
end

如果要阻止按钮打开步骤，可以添加import { Step, StepLabel, StepContent, Button } from "@material-ui/core";

材质UI-步进步骤中的按钮

1 个答案: