Open MonstraG opened 2 days ago
https://mui.com/material-ui/migration/upgrade-to-v6/#breaking-changes-affecting-types
Unclear explanations
What to do if I have:
const StyledBox = styled(Box)<{ $customProp: string }>` color: white; `;
?
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.
styled("span")
styled(Box) as typeof Box
What do I do?
Search keywords: Box component styled custom props
I guess I could rewrite the entrie thing as a giant sx, but that is not very easy.
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:
?
Context
Example of a real 2-y/o piece of code that I'm trying to migrate from v5 to v6:
That is later used as
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 usestyled(Box) as typeof Box
then I loose the type for custom prop.What do I do?
Search keywords: Box component styled custom props