Is there any way to observer the `popupState`?

[tamdc]

I need to catch the state change of submenu level 3 to change CSS property of lvl2. Each has their own popupState.

<MenuItemLv1 {...bindHover(lvl2MenuState)}>
    <Typography>Lv1 menu item</Typography>
    <Lvl2Menu
          transformOrigin={{ horizontal: 48, vertical: -48  }}
          {...bindMenu(lvl2MenuState)}
    >
         {lvl2menuItems.map(renderLv2MenuItem)}
    </Lvl2Menu>
</MenuItemLv1>

<MenuItemLv2 {...bindHover(lvl3MenuState)}>
    <Typography>Lv2 menu item</Typography>
    <Lvl3Menu
           anchorOrigin={{ horizontal: 'right', vertical: 'top' }}
           transformOrigin={{ horizontal: -24, vertical: 'top' }}
          {...bindMenu(lvl3MenuState)}
    >
         {lvl3menuItems.map(renderLv3MenuItem)}
    </Lvl3Menu>
</MenuItemLv2>

Do we have a prop callback that whenever the popupState change we can trigger the function passed through?

[jedwards1211]

Sorry for the delay...there's no prop callback, but when level 3 opens or closes it will actually set the lvl2MenuState._childPopupState after a tick. So you could set CSS based upon lvl2MenuState._childPopupState?.open ? valueIfOpen : valueIfClosed.

(Note: _childPopupState starts with an underscore because I didn't exactly intend for people to rely on it, but I can't stop you 😄)