diff --git a/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md b/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md index 47cab2321989c5..a6efdaa62f5cd1 100644 --- a/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md +++ b/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md @@ -404,6 +404,31 @@ The components affected by this change are: - Switch - Tabs +## Breaking changes affecting types + +### Box + +The `component` prop has been removed from the `BoxOwnProps` as it is already included in the `Box` type. +This might affect your code if you are using the `styled` function with the `Box` component. +If this is the case, use a `div` element instead of `Box`: + +```diff +-const StyledBox = styled(Box)` ++const StyledDiv = styled('div')` + color: white; + `; +``` + +This yields the same end result. +If this doesn't work for you, you can also cast the `styled` returned value to `typeof Box`: + +```diff + const StyledBox = styled(Box)` + color: white; +-`; ++` as typeof Box; +``` + ## Stabilized APIs ### CssVarsProvider and extendTheme diff --git a/docs/src/components/showcase/FolderTreeView.tsx b/docs/src/components/showcase/FolderTreeView.tsx index 5394f73e1d758d..1ef2e51d518d04 100644 --- a/docs/src/components/showcase/FolderTreeView.tsx +++ b/docs/src/components/showcase/FolderTreeView.tsx @@ -129,7 +129,7 @@ interface CustomLabelProps { } function CustomLabel({ color, expandable, children, ...other }: CustomLabelProps) { - let Icon; + let Icon: null | React.ElementType = null; if (expandable) { Icon = FolderRounded; } else { diff --git a/packages/mui-system/src/Box/Box.d.ts b/packages/mui-system/src/Box/Box.d.ts index ac3978e6eab2f5..174ea89c289da2 100644 --- a/packages/mui-system/src/Box/Box.d.ts +++ b/packages/mui-system/src/Box/Box.d.ts @@ -183,11 +183,6 @@ export type SystemProps = { export interface BoxOwnProps extends SystemProps { children?: React.ReactNode; - /** - * The component used for the root node. - * Either a string to use a HTML element or a component. - */ - component?: React.ElementType; ref?: React.Ref; /** * The system prop that allows defining system overrides as well as additional CSS styles. diff --git a/packages/mui-system/src/Box/Box.spec.tsx b/packages/mui-system/src/Box/Box.spec.tsx index 2e2dc63d4debbe..eccd87aeac2731 100644 --- a/packages/mui-system/src/Box/Box.spec.tsx +++ b/packages/mui-system/src/Box/Box.spec.tsx @@ -108,7 +108,7 @@ function TestFillPropCallback() { // eslint-disable-next-line material-ui/no-styled-box const StyledBox = styled(Box)` color: white; -`; +` as typeof Box; function StyledBoxWithSx() { return ( diff --git a/packages/mui-system/test/typescript/moduleAugmentation/boxSx.spec.tsx b/packages/mui-system/test/typescript/moduleAugmentation/boxSx.spec.tsx new file mode 100644 index 00000000000000..fb716a48a77f55 --- /dev/null +++ b/packages/mui-system/test/typescript/moduleAugmentation/boxSx.spec.tsx @@ -0,0 +1,159 @@ +import * as React from 'react'; +import Box from '@mui/system/Box'; + +// https://github.com/mui/material-ui/issues/34068 + +declare global { + namespace JSX { + interface IntrinsicElements { + test1: number; + test2: number; + test3: number; + test4: number; + test5: number; + test6: number; + test7: number; + test8: number; + test9: number; + test10: number; + test11: number; + test12: number; + test13: number; + test14: number; + test15: number; + test16: number; + test17: number; + test18: number; + test19: number; + test20: number; + test21: number; + test22: number; + test23: number; + test24: number; + test25: number; + test26: number; + test27: number; + test28: number; + test29: number; + test30: number; + test31: number; + test32: number; + test33: number; + test34: number; + test35: number; + test36: number; + test37: number; + test38: number; + test39: number; + test40: number; + test41: number; + test42: number; + test43: number; + test44: number; + test45: number; + test46: number; + test47: number; + test48: number; + test49: number; + test50: number; + test51: number; + test52: number; + test53: number; + test54: number; + test55: number; + test56: number; + test57: number; + test58: number; + test59: number; + test60: number; + test61: number; + test62: number; + test63: number; + test64: number; + test65: number; + test66: number; + test67: number; + test68: number; + test69: number; + test70: number; + test71: number; + test72: number; + test73: number; + test74: number; + test75: number; + test76: number; + test77: number; + test78: number; + test79: number; + test80: number; + test81: number; + test82: number; + test83: number; + test84: number; + test85: number; + test86: number; + test87: number; + test88: number; + test89: number; + test90: number; + test91: number; + test92: number; + test93: number; + test94: number; + test95: number; + test96: number; + test97: number; + test98: number; + test99: number; + test100: number; + test101: number; + test102: number; + test103: number; + test104: number; + test105: number; + test106: number; + test107: number; + test108: number; + test109: number; + test110: number; + test111: number; + test112: number; + test113: number; + test114: number; + test115: number; + test116: number; + test117: number; + test118: number; + test119: number; + test120: number; + test121: number; + test122: number; + test123: number; + test124: number; + test125: number; + test126: number; + test127: number; + test128: number; + test129: number; + test130: number; + test131: number; + test132: number; + test133: number; + test134: number; + test135: number; + test136: number; + test137: number; + test138: number; + test139: number; + } + } +} + +function Test() { + return ( +
+ + +
+ ); +} diff --git a/packages/mui-system/test/typescript/moduleAugmentation/boxSx.tsconfig.json b/packages/mui-system/test/typescript/moduleAugmentation/boxSx.tsconfig.json new file mode 100644 index 00000000000000..b562db4ecaa362 --- /dev/null +++ b/packages/mui-system/test/typescript/moduleAugmentation/boxSx.tsconfig.json @@ -0,0 +1,4 @@ +{ + "extends": "../../../../../tsconfig", + "files": ["boxSx.spec.tsx"] +}