-
Notifications
You must be signed in to change notification settings - Fork 31
Closed
Labels
Description
Description
After upgrading to the latest version, I'm getting a TypeScript error with HoverPopover
component from material-ui-popup-state
.
Error Message
'HoverPopover' cannot be used as a JSX component.
Its type 'ComponentType<PopoverProps>' is not a valid JSX element type.
Type 'ComponentClass<PopoverProps, any>' is not assignable to type 'ElementType'.
Type 'ComponentClass<PopoverProps, any>' is not assignable to type 'new (props: any, deprecatedLegacyContext?: any) => Component<any, any, any>'.
Property 'refs' is missing in type 'Component<PopoverProps, any, any>' but required in type 'Component<any, any, any>'
Code Example
<PopupState variant="popover" popupId="profile-menu">
{(popupState) => (
<>
<Button
{...bindHover(popupState)}
component={Link}
href="/xxx"
prefetch={false}
onMouseEnter={() => router.prefetch('/xxx')}
endIcon={<KeyboardArrowDownIcon />}
sx={linkStyleDesktop}
className={isActive('/xxx') ? 'active' : ''}
>
Min Profil
</Button>
<HoverPopover
{...bindPopover(popupState)}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left'
}}
transformOrigin={{
vertical: 'top',
horizontal: 'left'
}}
disableScrollLock
>
<Box sx={{ py: 1 }}>
{/* Menu items */}
</Box>
</HoverPopover>
</>
)}
</PopupState>
Additional Context
- This code worked in the previous version without any type errors