Material-ui: TS2322 Spreading declared MenuItemProps on MenuItem fails type checking

[SoulsD]

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

MenuItemProps should be typed with correct 'button' override by default the when imported

Current Behavior 😯

from core/MenuItem/MenuItem.d.ts:

declare const MenuItem: OverridableComponent<ListItemTypeMap<{ button: false }, 'li'>> &
  ExtendButtonBase<ListItemTypeMap<{ button?: true }, 'li'>>;

export type MenuItemProps<D extends React.ElementType = 'li', P = {}> = OverrideProps<
  ListItemTypeMap<P, D>,
  D
>;

P parameter of menu Item props default to {} instead of { button?: true } resulting in an error when you want to use it directly:

    var a: MenuItemProps = {};
    <MenuItem {...a}/>

    // error: 
    // Types of property 'button' are incompatible.
    //     Type 'boolean | undefined' is not assignable to type 'true | undefined'.
    //         Type 'false' is not assignable to type 'true | undefined'

To dismiss the error, type MenuItemProps needs to be declared like this:

MenuItemProps<'li', { button?: true }>

Steps to Reproduce 🕹

    import MenuItem, { MenuItemProps } from "@material-ui/core/MenuItem";
    /* ... */

    var a: MenuItemProps = {};
    <MenuItem {...a}/>

Link:

1. https://codesandbox.io/s/create-react-app-with-typescript-3j44q

Context 🔦

I am migrating to MUIv4 from v3. I had a component taking MenuItemProps in its own props to be passed to its children MenuItems. I am now forced to type this as MenuItemProps<'li', { button?: true }>.

Your Environment 🌎

| Tech | Version |
|--------------|---------|
| Material-UI | v4.1.1 |
| React | v16.8 |
| Browser | Chrome 74 |
| TypeScript | 3.4.1 |

[oliviertassinari]

This seems to be the same core issue than #16122.

[rosskevin]

Broken test pr in #16315, I don't think this is the same as #16122

[Kyderman]

Just wanted to bump this up as it's still a problem!

[sirajalam049]

I am using version 4.9.9 ,
still the same problem. Why the issue is closed while it is not fixed?

[girardiricardo]

I am using 4.11.0, still the same problem.

[oliviertassinari]

How about we refactor MenuItem to be built on top of ButtonBase, not on top of ListItem? Would it help solve this TypeScript issue?

[DMR-coding]

How about we refactor MenuItem to be built on top of ButtonBase, not on top of ListItem? Would it help solve this TypeScript issue?

That would solve the issue for MenuItem specifically, but ListItem itself is broken identically. A solution which goes more to the root of the problem would be preferable.