Material de interfaz de usuario - botón en el interior paso paso a paso

SO1992:

Quiero tener un elemento se puede hacer clic en un paso de paso a paso de material de interfaz de usuario. El elemento debe ser visible todo el tiempo y no sólo cuando un paso está activo. Configuración de todos los pasos a activo no es posible debido a razones UX.

Esto es lo que he intentado:

<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>

Pero parece como tener un div dentro de un paso no está permitido. Im que consigue errores en la fila de la div (por ejemplo Advertencia: Recibido truepara un atributo booleano no activo).

Entonces traté de poner el icono en la etiqueta StepButton:

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

Pero esto no es posible tampoco, ya que los botones dentro de botones no están permitidos.

¿Hay alguna otra manera de utilizar un elemento puede hacer clic (como el IconButton) en un paso?

andytham:

Puede colocar un botón dentro de un StepLabel:

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

colocado de esta manera:

<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>

Si desea evitar que el botón de abrir el paso, se puede añadir una e.stopPropagation()