[TextField] FormHelperTextProps component prop error in TypeScript

[robcaldecott]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

I am trying to replace the FormHelperText component used by a TextField with my own variant but am getting a TS error when attempting to override the component prop. Here is the code:

// Custom helper text component
const HelperText = ({ children }: FormHelperTextProps) => (
  <Stack direction="row" spacing={0.5} alignItems="center" sx={{ p: 1 }}>
    <ErrorOutlineIcon color="error" />
    <Typography component="span" variant="body2" color="error">
      {children}
    </Typography>
  </Stack>
);

<TextField
  label="Enter some stuff"
  defaultValue="Hello"
  helperText="Hello, world!"
  // ts(2322) error here
  FormHelperTextProps={{ component: HelperText }}
/>

The full TS error is:

Type '{ component: ({ children }: FormHelperTextProps<"p", {}>) => JSX.Element; }' is not assignable to type 'Partial<FormHelperTextProps<"p", {}>>'.
  Object literal may only specify known properties, and 'component' does not exist in type 'Partial<FormHelperTextProps<"p", {}>>'.

The code works and I get my fancy helper text replacement but I cannot fix the TS error.

Expected behavior 🤔

I would expect to be able to override the component prop of FormHelperTextProps to replace the implemenation.

The MUI docs state:

The component used for the root node. Either a string to use a HTML element or a component.

https://mui.com/material-ui/api/form-helper-text/#props

Steps to reproduce 🕹

https://codesandbox.io/s/upbeat-lamarr-z7f72d?file=/src/App.tsx

Context 🔦

I want to customise the component used to render TextField helperText.
Maybe there is another way to do this without incurring the wrath of TypeScript?

Your environment 🌎

@mui/material 5.8.4

[robcaldecott]

Seems to be related to this:

#27703

And maybe more. Looks like there's no workaround other than ts-expect-error 🤷‍♂️

[ZeeshanTamboli]

Also related to #32392 and #32872

[auduongtuan]

any updates on this?

[ZeeshanTamboli]

any updates on this?

@auduongtuan There is a fix provided in #35924.

[JanPretzel]

any updates on this?

@auduongtuan There is a fix provided in #35924.

It doesn't really fix the issue. The component prop now only allows 'p' | undefined. Is this intended or still broken?

Updated the codesandbox of @robcaldecott here: https://codesandbox.io/s/rough-tree-cxvcgc

[sai6855]

@JanPretzel this will be fixed in #38084

[jonesmac]

I think this might be back in 5.14.3

[jonesmac]

The issue is solved for the standard component prop on a mui component. However, its still a regression for styled components as passing the component prop causes a type error. Since it worked previously, can we revert again till the styled case is fixed?

Let me know if a new issue would help.

See updated sandbox - https://codesandbox.io/s/nifty-paper-gqcq77?file=/src/App.tsx