Box element does not have component prop anymore even when used directly as an elemtent.

[mtajammulzia]

Search keywords

Box, BoxProps

Latest version

• I have tested the latest version

Steps to reproduce

Steps:

1. Setup a next app with create next-app
2. Install MUI dependencies as mentioned on the installation page
3. Try using Box component as following

<Box component="span">
 ...
</Box>

OR

Check type of BoxProps

Current behavior

As mentioned on this Changelog component prop was removed from BoxProps type as Box already has it and that we can use it when we are using it as Styled component like mentioned in the change log. This restricts using component as prop even when we use Box directly as an element.

Expected behavior

When using Box as element, we should be able to pass component prop.

Context

Rather than having to use type casting and using styled, users should be able to pass component prop when using Box directly as an element.

For reference, Stack type is as follows:

export type StackProps<
  RootComponent extends React.ElementType = StackTypeMap['defaultComponent'],
  AdditionalProps = {},
> = OverrideProps<StackTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
  component?: React.ElementType;
};

While Box type is as follows:

export type BoxProps<
  RootComponent extends React.ElementType = BoxTypeMap['defaultComponent'],
  AdditionalProps = {},
> = OverrideProps<BoxTypeMap<AdditionalProps, RootComponent, MaterialTheme>, RootComponent>;

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[DiegoAndai]

Hey @mtajammulzia, thanks for the report.

This is a duplicate of #43955, so I'm closing in favor of that issue where you can follow the progress.

There's already a PR to fix this: #44643.