Component created with styled doesn't contain the component prop in TS

[vitorpdasilva]

Steps to reproduce

Link to live example: (required)

Steps:

1. Have a component <List component="nav">
2. switch to a styled component, for example

import {  List,  styled } from '@mui/material';

const StyledList = styled(List)({
  display: 'flex',
  flexDirection: 'column',
  width: 240,
});

<StyledList component="nav">

3. An error will pop up.

Type '{ children: Element[]; component: string; }' is not assignable to type 'IntrinsicAttributes & ListOwnProps & CommonProps & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & { ...; }, "classes" | ... 6 more ... | "subheader"> & MUIStyledCommonProps<...>'.
  Property 'component' does not exist on type 'IntrinsicAttributes & ListOwnProps & CommonProps & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & { ...; }, "classes" | ... 6 more ... | "subheader"> & MUIStyledCommonProps<...>'.

Current behavior

It throws the error

Type '{ children: Element[]; component: string; }' is not assignable to type 'IntrinsicAttributes & ListOwnProps & CommonProps & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & { ...; }, "classes" | ... 6 more ... | "subheader"> & MUIStyledCommonProps<...>'.
  Property 'component' does not exist on type 'IntrinsicAttributes & ListOwnProps & CommonProps & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & { ...; }, "classes" | ... 6 more ... | "subheader"> & MUIStyledCommonProps<...>'.

Expected behavior

dont throw any error.

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  @emotion/react: ^11.13.3 => 11.13.3 
    @emotion/styled: ^11.13.0 => 11.13.0 
    @mui/base:  5.0.0-beta.58 
    @mui/core-downloads-tracker:  6.1.3 
    @mui/icons-material: ^6.1.3 => 6.1.3 
    @mui/lab: 6.0.0-beta.11 => 6.0.0-beta.11 
    @mui/material: ^6.1.3 => 6.1.3 
    @mui/private-theming:  6.1.3 
    @mui/styled-engine:  6.1.3 
    @mui/styles: ^6.1.3 => 6.1.3 
    @mui/system:  6.1.3 
    @mui/types:  7.2.18 
    @mui/utils: ^6.1.3 => 6.1.3 
    @mui/x-date-pickers: ^6.18.6 => 6.20.2 
    @types/react: ^18.2.0 => 18.3.11 
    react: ^18.3.0 => 18.3.1 
    react-dom: ^18.2.0 => 18.3.1 
    typescript: ^5.6.3 => 5.6.3 

Search keywords: list component v6

[aarongarciah]

Thanks for reporting @vitorpdasilva. Here's a reproduction https://codesandbox.io/p/sandbox/sad-faraday-ghd8xh?file=/src/Demo.tsx

The JS implementation works, but the component prop is missing in the TS counterpart.

Until we solve the issue, using the as prop should be equivalent:

<StyledList as="nav">

edit: the as prop is not equivalent.

[aarongarciah]

@vitorpdasilva sorry for my last comment, the as prop is not equivalent. We'll take a look at the issue.

[mnajdova]

This is not a new issue, the solution is documented in https://mui.com/material-ui/guides/composition/#with-typescript. It's either this or you cast the newly created component with as typeof Typography (or any other Material UI component). This is likely a duplicate of: #29875

[aarongarciah]

Thanks @mnajdova. Closing as duplicate of #29875