Setting disableRipple on ListItem customization theme will throw a Typescript error

Hi! I am trying to disable the ripple effect globally on a ListItem that uses a Button as a list item, through the createMuiTheme.props. I’m using React, Typescript, and Material UI.

createMuiTheme({
  props: {
    MuiListItem: {
      disableRipple: true,
      disableTouchRipple: true
    }
  }
})

Typescript will throw the following error:

Types of property ‘MuiListItem’ are incompatible. Type ‘{ disableRipple: boolean; disableTouchRipple: boolean; disableFocusRibble: boolean; }’ has no properties in common with type ‘Partial<OverrideProps<ListItemTypeMap<{}, “li”>, “li”>>’.ts(2322)

What is the proper way to set this up?

Here is a code sandbox showing the type error: ~https://codesandbox.io/s/using-buttonbase-props-in-muilistitem-default-props-v7fjb?file=/src/App.tsx~ https://codesandbox.io/s/using-buttonbase-props-in-muilistitem-default-props-forked-6jdnx

[ryancogswell]

@eps1lon I’ve added a sandbox and removed the one invalid prop (disableFocusRipple) from the initial issue text. The gist of the problem is that Typescript complains when specifying ButtonBase props within the MuiListItem portion of the theme props.

Here’s the related StackOverflow question (presumably from the same person): https://stackoverflow.com/questions/65274453/overwrite-material-ui-prop-types.

[eps1lon]

but ButtonBase props are part of the ListItem API when the button prop is used;

So are any other props for a specific component. It sounds like a niche case and considering the first time I see it, TypeScript actually prevented a mistake, it’s probably safer to let people trip over it first.