unable to styled ListItem (typescript definition)

[dabretin]

I think it's not possible to styled ListItem because of the typescript definition of ListItemProps

• 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 😯

Okayyy it's really for showing the problem, the real goal is to styled the ListItem without using sx props -it will be a library component that let the user potentially use the sx props-.

Context 🔦

Your Environment 🌎

@types/react...17.0.8
@types/react-dom...17.0.5
typescript...4.3.2
@emotion/core...11.0.0
@emotion/react...11.4.0
@emotion/styled...11.3.0
@material-ui/core@next...5.0.0-alpha.34
@material-ui/icons@next...5.0.0-alpha.34
@material-ui/lab@next...5.0.0-alpha.34
react...17.0.2
react-dom...17.0.2

[dabretin]

Perhaps I'm completly wrong but I have to try ;)
The typescript definition of ListItem is an OverridableComponent (with li as DefaultComponent) or an extension of ButtonBase (defined with the button property).
The definition explicitly need the two (look here)... Is the & must not be an | ?

[siriwatknp]

We are working on extracting button out of ListItem in #26442

[siriwatknp]

This will be fixed once #26446 merged. However, this will still be an issue.

const StyledListItem = styled(ListItem)

// @ts-expect-error
<StyledListItem button>

I think it is okay because we are deprecating button prop in v5 in favor of ListItemButton.

[oliviertassinari]

Otherwise, an alternative solution #13921 (comment)