材質UI - ステッパーステップ内のボタン

SO1992：

私は、マテリアル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>

ボタン内のボタンが許可されていないので、しかし、これは、どちらかのことはできません。

ステップ（IconButtonのような）クリック可能な要素を使用する他の方法はありますか？

andytham：

あなたは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()