Types for ButtonBase are wrong

[danielo515]

This is the type definition for button base (which is later used by a lot of other components like Tabs)

https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/ButtonBase/ButtonBase.d.ts#L68

As you can see there, it doesn't specify a property called component, it specifies defaultComponent.
If you

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Because of this, all advanced usages of all the components based on the button base are reporting type errors

Expected Behavior 🤔

Types should match the actual implementation

Steps to Reproduce 🕹

Just provide a button or a tab with a component property and see the type error

https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAKjgQwM5wEoFNkGN4BmUEIcA5FDvmQNwBQokscAKsgEZxEnkACIyGFijBkAGwC0AV2AB6XNCyy27Wg3DR4K9N1Jl+g4aMkz5i5R1RrGmuACEpMGBAB2XYnoNCR46XIWUsg5OrmrqTPAA3nRwcLKycDAAFlhwChouWC4w6ACeEFJwUqhYACZ0AL7uPPoC3sZ+ZpRkdHQEUi74wK5wACJYIBAAFACUcNGx8XAAmgVQaRClWDFwADwAfCurwc5u6ZCZ2QC8ZKXAAG5k6wDCYsC4ANZwIFirQY67m7Gr2l+xayoFhksjAjpEyMgyFUxBwsGITilcmQ4us4CtvoD9q4QWCIVC4DD2HCEVgkSi0f8ARwgQcceDIdDYfCyIjkbJUVsLOxUH83psKkA

Context 🔦

Just working using material

Your Environment 🌎

npx: installed 2 in 4.151s

System:
OS: macOS 11.1
Binaries:
Node: 10.18.1 - ~/.nvm/versions/node/v10.18.1/bin/node
Yarn: 1.21.1 - /usr/local/bin/yarn
npm: 6.14.11 - ~/mega/trabajo/GIT/pento-tech-challenge/delivery/front/node_modules/.bin/npm
Browsers:
Chrome: 89.0.4389.90
Edge: Not Found
Firefox: 85.0.2
Safari: 14.0.2
npmPackages:
@material-ui/core: ^4.8.3 => 4.11.3
@material-ui/icons: ^4.5.1 => 4.11.2
@material-ui/lab: ^4.0.0-alpha.39 => 4.0.0-alpha.57
@material-ui/pickers: ^3.2.10 => 3.3.10
@material-ui/styles: 4.11.3
@material-ui/system: 4.11.3
@material-ui/types: 5.1.0
@material-ui/utils: 4.11.2
@types/react: 17.0.3
react: ^16.2.0 => 16.14.0
react-dom: ^16.2.0 => 16.14.0
typescript: ^4.2.2 => 4.2.3

{
  "compilerOptions": {
    "lib": ["es2020", "DOM"],
    "moduleResolution": "node",
    "module": "esnext",
    "allowJs": true,
    "checkJs": true,
    "resolveJsonModule": true,
    "noEmit": true,
    "strict": true,
    "jsx": "react",
    "declaration": true,
    "declarationDir": "types",
    "allowSyntheticDefaultImports": true,
    "downlevelIteration": true,
    "baseUrl": "./src",
    "paths": {
      "rootReducer": ["common/rootReducer"],
      "common": ["common/*"],
      "formatters": ["formatters"],
      "@types": ["types"]
    }
  },
  "typeAcquisition": { "enable": true },
  "include": ["src/**/*.js", "src/**/*.d.ts"],
  "exclude": ["node_modules"]
}

[eps1lon]

Thanks for the report.

I can't see an error in the code you provided. Is this maybe a duplicate of #15827?

[danielo515]

Yes, it is exactly the same issue. I thought I have search better, my bad.
Thanks.