[Box] Error when using component property in a styled Box component after upgrading to 5.14.3

[doberkofler]

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/old-sky-jvvldp?file=/Demo.tsx:266-275

Steps:
The use of the component property reports an error

Current behavior 😯

After upgrading to 5.14.3 TypeScript reports the following type error:

Type '{ children: Element; component: string; }' is not assignable to type 'IntrinsicAttributes & SystemProps<Theme> & { children?: ReactNode; ref?: Ref<unknown> | undefined; sx?: SxProps<Theme> | undefined; } & Omit<...> & MUIStyledCommonProps<...>'.
  Property 'component' does not exist on type 'IntrinsicAttributes & SystemProps<Theme> & { children?: ReactNode; ref?: Ref<unknown> | undefined; sx?: SxProps<Theme> | undefined; } & Omit<...> & MUIStyledCommonProps<...>'.

Expected behavior 🤔

No type error as with 5.14.1

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

System:
    OS: macOS 13.5
  Binaries:
    Node: 18.16.1 - ~/.nvm/versions/node/v18.16.1/bin/node
    Yarn: Not Found
    npm: 9.8.1 - ~/.nvm/versions/node/v18.16.1/bin/npm
  Browsers:
    Chrome: 115.0.5790.114
    Edge: Not Found
    Safari: 16.6
  npmPackages:
    @emotion/react: 11.10. => 11.11.1
    @emotion/styled: 11.11.0 => 11.11.0
    @mui/base:  5.0.0-beta.9
    @mui/core-downloads-tracker:  5.14.3
    @mui/icons-material: 5.14.3 => 5.14.3
    @mui/material: 5.14.3 => 5.14.3
    @mui/private-theming:  5.13.7
    @mui/styled-engine:  5.13.2
    @mui/system:  5.14.3
    @mui/types:  7.2.4
    @mui/utils:  5.14.3
    @mui/x-data-grid:  6.10.2
    @mui/x-data-grid-pro: 6.10.2 => 6.10.2
    @mui/x-license-pro:  6.10.2
    @types/react: 18.2.18 => 18.2.18
    react: 18.2.0 => 18.2.0
    react-dom: 18.2.0 => 18.2.0
    typescript: 5.1.6 => 5.1.6

[michaldudak]

Thanks for the report. This behavior is unfortunate but consistent with all the other components in Material UI. We'll try to find a fix for all the components (likely within the styled utility). For now, you can work around this issue by casting the result of styled to typeof Box:

const StyledBox = styled(Box)(() => ({
  fontSize: "100px",
  color: "white"
})) as typeof Box;

cc @brijeshb42, @mnajdova

[doberkofler]

Thank you for your feedback. As this seems to be a breaking change, should it not be part a a major release and not be hidden in a patch release?

[Reflejo]

@michaldudak Using wildcard BoxPropss + component used to work and now it doesn't, see: https://codesandbox.io/s/angry-cori-dhytrg?file=/Demo.tsx

[michaldudak]

@doberkofler We were unaware that this use case would break, so it was not done intentionally.

If we don't find the solution until the next release (early next week), we'll revert the PR that caused the problem.

[doberkofler]

@michaldudak I understand. Thank you for caring!

[kirillku]

What should be the workaround if i also pass some extra props to styled component?

export const StyledBox = styled(Box)<{ size?: number }>`
  width: ${(p) => p.size}px;
  height: ${(p) => p.size}px;
` as typeof ???;

---

UPD
Had to do this

export const StyledBox = styled(Box)<{ size?: number }>`
  width: ${(p) => p.size}px;
  height: ${(p) => p.size}px;
` as React.FC<BoxProps & { size?: number; component?: React.ElementType }>;

[michaldudak]

We are going to revert the commit the caused these breaking changes. Expect a release with the fix today or tomorrow.

[ggascoigne]

The exact same thing is still breaking with MenuItem using @mui/material@5.14.4, do you want a separate bug or is it still a variation of this one?

https://codesandbox.io/s/great-wildflower-pr8hdy?file=/Demo.tsx

[michaldudak]

@ggascoigne, this is a different issue. It wasn't caused by the same recent changes, but it was not supported in Material UI v5 (and possibly before). See #29875

[ggascoigne]

OK thank you. That said, it's worked well until 5.14.4 and it seems weird to say that it's not supported when the underlying JavaScript clearly supports it, it's useful, and only the types are wrong. Either way, I can work around it.

[enricoros]

For now, you can work around this issue by casting the result of styled to typeof Box:

...
})) as typeof Box;

Thanks for saving my day @michaldudak . Works with Joy UI as well.