The component prop is not allowed on a styled() MUI component

[thany]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/strange-hofstadter-6668qh?file=/src/App.tsx

Observe the Typescript error.

Current behavior 😯

The typings cause an error, saying component doesn't exist on the styled() MUI component, but it does exist on the same MUI component directly. Somehow the typings for that one prop is not transferred over properly to the typings of the output of the styled() function.

It does work, though with that typescript error.

Expected behavior 🤔

No error. I don't see why this prop wouldn't be allowed, especially given that it works perfectly fine at runtime.

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

  System:
    OS: Windows 10 10.0.19045
  Binaries:
    Node: 18.15.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 9.6.7 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 114.0.5735.110
    Edge: Spartan (44.19041.1266.0), Chromium (114.0.1823.41)
  npmPackages:
    @emotion/react:  11.10.6
    @emotion/styled:  11.10.6
    @mui/base:  5.0.0-beta.4
    @mui/core-downloads-tracker:  5.13.4
    @mui/material:  5.13.4
    @mui/private-theming:  5.13.1
    @mui/styled-engine:  5.13.2
    @mui/styles:  5.13.2
    @mui/system:  5.13.2
    @mui/types:  7.2.4
    @mui/utils:  5.13.1
    @types/react:  18.2.0
    react:  18.2.0
    react-dom:  18.2.0
    typescript:  4.9.5

I'm on Firefox 114. Not that it matters.

[thany]

There is a silly workaround:

- const StyledTypography = styled(Typography)({ ... });
+ const StyledTypography = styled(Typography)<{ component: string }>({ ... });

So basically forcing the component prop to exist again. The string type is obviously not correct, but it works in my scenario.

[brijeshb42]

I need to dig deeper into it to have more context around the component prop, but if you want to pass a custom component/tag, you could use the as prop instead of component and it has a higher precedence than component as well.

cc: @siriwatknp You might have more details.

[thany]

If I pass as="h2" then all MUI-related classnames are no longer applied. I think because the as prop is picked up by emotion, so the MUI component never comes into play.

[chouclee]

This issue is not just limited to component prop, but any props that are inherited from some base props. For example,

import { Link as RouterLink } from "react-router-dom";

const StyledListItemButton = styled(ListItemButton)<ListItemButtonProps>(({ theme }) => ({
}));

<StyledListItemButton 
   component={RouterLink}
   to={"/"}
/>

Both component and to will not be recognized.

[brijeshb42]

I'll check and revert.

[rishavpandey43]

@chouclee You're correct. It's removing all the system props from the component after being styled. I faced the same issue while creating a design system. Cannot override global settings always, need to create wrapper kinds of components several times.

We need to have this issue resolved.
Issue I got - #37961

[kellyrmilligan]

I have a similar issue to this, but instead of styled its for when I want to create a wrapper component for mui and also forward the ref. Is there an example of how to properly wrap a mui component that allows for the component prop usage and for fowarding refs?

[kellyrmilligan]

FWIW, I think this seems to work for styled:

export const CustomButton = styled(MuiButton)(({ theme }) => ({
  backgroundColor: theme.palette.success.dark,
})) as typeof MuiButton

https://mui.com/material-ui/guides/typescript/#complications-with-the-component-prop

[kellyrmilligan]

also, seems to be ok for this as well:

export const Button3 = React.forwardRef((props, ref) => (
  <MuiButton {...props} ref={ref} />
)) as typeof MuiButton

[kellyrmilligan]

a few storybook stories to prove it out a bit:

export const Ref: Story = {
  render: (args) => {
    const storyRef = useRef(null)
    return (
      <Button
        {...args}
        ref={storyRef}
        onClick={() => buttonAction(storyRef.current)}
      />
    )
  },
  args: {
    variant: "contained",
    color: "primary",
    children: "Click me",
  },
}

export const AsComponent: Story = {
  render: (args: any) => {
    return <Button {...args} component="a" href="/stuff" />
  },
  args: {
    variant: "contained",
    color: "primary",
    children: "Contained button",
  },
}

not great IMO, I really with the composition docs had a code example to do both ref forwarding and accept generics. The same behavior is desired with styled. styled at least seems to forward the ref for you. I really liked how chakra ui let you wrap their components with their own forwardRef, and that always allows the as prop to function properly, and for refs to be ok.

https://chakra-ui.com/community/recipes/as-prop

[mnajdova]

Duplicate of #29875