[docs] Box `component` removal migration help

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