[docs] Box `component` removal migration help

[MonstraG]

Related page

https://mui.com/material-ui/migration/upgrade-to-v6/#breaking-changes-affecting-types

Kind of issue

Unclear explanations

Issue description

What to do if I have:

 const StyledBox = styled(Box)<{ $customProp: string }>`
   color: white;
`;

?

Context

Example of a real 2-y/o piece of code that I'm trying to migrate from v5 to v6:

const FeatureDot = styled(Box)<{ $direction: "row" | "row-reverse" }>`
	position: absolute;

	${({ theme, $direction }) =>
		$direction === "row"
			? css`
					left: ${theme.spacing(dotHorizontalOffset.xs)};
					${theme.breakpoints.up("sm")} {
						left: ${theme.spacing(dotHorizontalOffset.sm)};
					}
					${theme.breakpoints.up("lg")} {
						left: ${theme.spacing(dotHorizontalOffset.lg)};
					}
				`
			: css`
					right: ${theme.spacing(dotHorizontalOffset.xs)};
					${theme.breakpoints.up("sm")} {
						right: ${theme.spacing(dotHorizontalOffset.sm)};
					}
					${theme.breakpoints.up("lg")} {
						right: ${theme.spacing(dotHorizontalOffset.lg)};
					}
				`};

	top: calc(50% - ${({ theme }) => theme.spacing(dotSize / 2)});
	height: ${({ theme }) => theme.spacing(dotSize)};
	width: ${({ theme }) => theme.spacing(dotSize)};
	border-radius: ${({ theme }) => theme.spacing(99)};
	transition: ${({ theme }) =>
		theme.transitions.create("background-color", {
			easing: theme.transitions.easing.easeOut,
			duration: theme.transitions.duration.shortest
		})};
`;

That is later used as

<FeatureDot
	bgcolor={dotReached ? progressColor : "grey.500"}
	$direction={direction}
	component="span"
	ref={dotRef}
/>

So I have the combination of
a) custom prop
b) system prop (will be sx)
c) component.

If I use styled("span"), then I loose the system prop (or sx).
If i use styled(Box) as typeof Box then I loose the type for custom prop.

What do I do?

Search keywords: Box component styled custom props

[MonstraG]

I guess I could rewrite the entrie thing as a giant sx, but that is not very easy.

[siriwatknp]

If I use styled("span"), then I loose the system prop (or sx).

You will lose the system prop which is expected because it's deprecated. However, the sx prop still works.

https://codesandbox.io/p/sandbox/exciting-davinci-jhsk24?file=%2Fsrc%2FDemo.tsx%3A14%2C1

I think we could improve the Codemod to transform the system props for arbitrary components.

[MonstraG]

Hm, if styled() adds sx prop, then this is not an issue anymore. I didn't expect that, is it mentioned in the docs?

[siriwatknp]

Hm, if styled() adds sx prop, then this is not an issue anymore. I didn't expect that, is it mentioned in the docs?

Good point, I don't see any page mention about this. I think it should be in https://mui.com/material-ui/customization/how-to-customize/#2-reusable-component