Estoy tratando de crear un menú anidado usando Material UI, sin ningún paquete de terceros .

Que he hecho:

• Creó un menú y elementos de menú.
• Uno de los elementos del menú agregó un botón.
• Abre otro menú con un elemento de menú.

Está bien funcionalmente, desordenado pero funcional.

Código:

 <Button aria-controls="fade-menu" aria-haspopup="true" onClick={handleClick} > EU <ArrowDropDown /> </Button> <Menu id="fade-menu" anchorEl={anchorEl} keepMounted open={open} onClose={handleClose} > {Object.keys(SETTING).map((key: string) => { <MenuItem key={key} onClick={onChange(key)} selected={isSelected}> <Button // want this button to be hidden, but functional. aria-controls="fade-menu" aria-haspopup="true" onClick={handleSubClick} > <ArrowDropDown /> </Button> <Menu id="fade-menu" aria-controls="fade-menu" aria-haspopup="true" anchorEl={subAnchorEl} keepMounted open={subOpen} getContentAnchorEl={null} anchorOrigin={{ vertical: "bottom", horizontal: 120 }} transformOrigin={{ vertical: "top", horizontal: "center" }} onClose={handleSubClose} className={subMenu} > {Object.keys(euCountries).map((keyId: string) => ( <MenuItem key={key} onClick={onChange(keyId,true)} selected={path[type] === keyId}> UK </MenuItem>))} </Menu> </MenuItem> )})} </Menu>

El problema:

Necesito este botón con el icono de flecha hacia abajo, integrado con el elemento del menú en sí.

La salida

Aparte del uso de paquetes de terceros, se acepta cualquier solución alternativa. Como cambios de CSS u otro componente secundario, etc.

Editar:

Quiero que la salida se vea así. Salida que necesito

En cambio, estoy recibiendo esto. Salida que obtengo