[system] Passing component="a" prop to any styled component gives typescript error

[raphaelbadia]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Hello,

I used to have a ListItemButton styled with sx, and I used the component="a" prop to make it clickable because it's in a drawer. I noticed that it threw a typescript error.

const StyledListItemButton = styled(ListItemButton)<ListItemButtonProps>(
  ({ theme }) => ({})
);

// Property 'component' does not exist on type 'IntrinsicAttributes & ListItemButtonBaseProps
<StyledListItemButton component="a">Hello</StyledListItemButton>

Expected behavior 🤔

The component prop should be able to be passed to a styled component.

Steps to reproduce 🕹

Steps:

1. open the codesandbox : https://codesandbox.io/s/component-prop-doesnt-work-with-styled-components-1i25hb?file=/demo.tsx
2. open the typescript playground: https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAKjgQwM5wEoFNkGN4BmUEIcA5FDvmQNwBQokscA3nXHAPSdwwAWWOLhKQAdllEx0ATwgBXOHNRYAJnQC+cIiXIABEHOCcQyGFijBkAGzJ0G4aPBZwAMsFQwAkmZAAhOTAwEKJwmtqkZPqGxqbmljb09kxOcB7SVqqhWsQRUUYmZhbWnGkZqLR2wqIecADKMOmqbh7eWH4BQSEAvKkNGSoAFM1ePv6BwQCUA+ys6nQTiQRyovjAwXAAIm0QAxOsM9xwAJryUEIQKlgzlDByUCHTHBwAPAB8My-Dre3jIcIO4kkXQARMhga8ABJYKxWCDPThfUYdYLvJ5wZ71RoqRFtMadc4AiQwEFgyHQ2HwzH9HE-Tqop7w+kLDRAA
3. view the error

Context 🔦

I am just trying to use the componentprop on styled elements because I like that API. I could probably use sx instead.

Your environment 🌎

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.
npx: installed 2 in 4.122s

  System:
    OS: macOS 12.2.1
  Binaries:
    Node: 14.18.1 - ~/.nvm/versions/node/v14.18.1/bin/node
    Yarn: 1.22.5 - ~/.yarn/bin/yarn
    npm: 6.14.15 - ~/.nvm/versions/node/v14.18.1/bin/npm
  Browsers:
    Chrome: 101.0.4951.54
    Edge: Not Found
    Firefox: 95.0.2
    Safari: 15.3
  npmPackages:
    @emotion/react: ^11.4.1 => 11.9.0 
    @emotion/styled: ^11.3.0 => 11.8.1 
    @mui/base:  5.0.0-alpha.79 
    @mui/icons-material: ^5.0.4 => 5.6.2 
    @mui/lab: ^5.0.0-alpha.49 => 5.0.0-alpha.80 
    @mui/material: ^5.0.2 => 5.6.4 
    @mui/private-theming:  5.6.2 
    @mui/styled-engine:  5.6.1 
    @mui/styles: ^5.0.1 => 5.6.2 
    @mui/system:  5.6.4 
    @mui/types:  7.1.3 
    @mui/utils:  5.6.1 
    @mui/x-date-pickers:  5.0.0-alpha.0 
    @types/react: ^17.0.9 => 17.0.44 
    react: 17.0.2 => 17.0.2 
    react-dom: 17.0.2 => 17.0.2 
    typescript: ^4.3.2 => 4.6.4 

I am using latest chrome version

tsonfig

{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "es5",
    "lib": ["es6", "dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "paths": {
      "@/core/*": ["./src/*"],
      "@/public/*": ["./public/*"]
    },
    "incremental": true
  },
  "include": [
    "next-env.d.ts",
    "./server.ts",
    "**/*.ts",
    "**/*.tsx",
    "src/styles/theme/colors.js",
    "src/declarations/*.d.ts",
    "src/types/*.d.ts"
  ],
  "exclude": ["node_modules"]
}

[ZeeshanTamboli]

Is it similar to #16846 ? Although it's showing error only when wrapped with styled.

Also I understand Button to have a root anchor (component="a"), but how anchor element as root in Slider component is used?

[ZeeshanTamboli]

Duplicate of #15759.

Solution mentioned at #15759 (comment)

[raphaelbadia]

Thanks !