[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 }>;