MUI styled component + a new prop (Typescript)

Question

I have ListItem and I want you make it red in certain cases. I've created styled mui component:

function StyledListItem({ hasErrors, ...props }) {
  const classes = listItemStyles();
  return (
    <ListItem
      classes={{
        root: clsx({
          [classes.root]: hasErrors,
        }),
        selected: clsx({
          [classes.selected]: hasErrors,
        }),
      }}
      {...props}
    />
  );
}

In this case I have ESLint error: "'hasErrors' is missing in props validation". If I do this

function StyledListItem(props: any) {
...
}

I've got Warning: React does not recognize the hasErrors prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase haserrors instead. If you accidentally passed it from a parent component, remove it from the DOM element.

How can I get rid of "'hasErrors' is missing in props validation" error?

Can you put that in a sandbox s owe can see your implementation? Is the first or second your implementation? Since the first removes the hasErrors from props. — Domino987
codesandbox.io/s/… There is no error on codebox as there is no ESlint but as I said it doesn't like function StyledListItem({ hasErrors, ...props }) it says 'hasErrors' is missing in props validation — Petr Schukin

Domino987 Domino987 · Accepted Answer · 2020-07-31T14:39:23

You need to add the ts types to the props like this:

function StyledListItem({ hasErrors, ...props }: {hasErrors: boolean}) {

This will tell typescript has at least the hasError prop. This will let you extract it like you do.

You should read more about react + typescript. If you need children, you can use the React.FC type:

function StyledListItem({ hasErrors, ...props }: {hasErrors: boolean, children: JSX.Element}) {

MUI styled component + a new prop (Typescript)

2 Answers