[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