[MUI v6] Box component warns about TypeScript type #43955
Comments
mtr1990
added
the
status: waiting for maintainer
|
I have the same issue. Waiting for maintainer. Thanks |
Same here! |
|
The trick here is to use a type generic: function Li({ children, ...other }: BoxProps<'li'>) {
function Ul({ children, ...other }: BoxProps<'ul'>) {
function Svg({ children, ...other }: BoxProps<'svg'>) {See demo: typescript playground This ensures that TypeScript understands what's going on, and also makes sure that you can, for example, pass the |
This works perfectly for me, thank you! |
@bartlangelaan Thank you it works well. But is there any solution when we use with styled() ? <WithStyled3 active component="nav" sx={{ color: 'white' }} />
const WithStyled3 = styled(Box, {
shouldForwardProp: (prop) => !['active'].includes(prop as string),
})<{ active?: boolean }>(({ theme }) => ({
width: 100,
height: 50,
marginBottom: 24,
backgroundColor: theme.palette.info.main,
variants: [
{
props: { active: true },
style: {
backgroundColor: theme.palette.success.main,
},
},
],
})) as typeof Box;https://stackblitz.com/edit/github-p7amox?file=src%2Fapp%2Fpage.tsx,package.json |
|
In that case, you can just style a Instead of passing a // Instead of the 'component' prop, use the 'as' prop.
<WithStyled3 active as="nav" sx={{ color: 'white' }} />
// Style a 'div' instead of 'Box'.
const WithStyled3 = styled('div', {
shouldForwardProp: (prop) => !['active'].includes(prop as string),
})<{ active?: boolean }>(({ theme }) => ({
// styling.
// You don't need the 'as typeof Box' anymore.
})); |
|
@bartlangelaan Thank you very much Can you provide documentation with Previously I only used The reason I want to use In MUI v5 I just do this <NavItemv5 active sx={{ color: 'white' }} />
const NavItemv5 = React.forwardRef<
HTMLUListElement,
BoxProps & { active?: boolean }
>(({ active, sx, ...other }, ref) => {
return (
<WithMuiv5 ref={ref} component="nav" active={active} sx={sx} {...other}>
<span>Icon</span>
<span>Text</span>
<span>Arrow</span>
</WithMuiv5>
);
});
const WithMuiv5 = styled(Box, {
shouldForwardProp: (prop) => !['active'].includes(prop as string),
})<{ active?: boolean }>(({ theme }) => ({
width: 100,
height: 50,
marginBottom: 24,
backgroundColor: theme.palette.info.main,
variants: [
{
props: { active: true },
style: {
backgroundColor: theme.palette.success.main,
},
},
],
}));But now v6 it becomes like this <NavItemv6 active sx={{ color: 'white' }} />
const NavItemv6 = React.forwardRef<
HTMLUListElement,
React.HTMLAttributes<HTMLUListElement> & {
active?: boolean;
sx?: SxProps<Theme>;
}
>(({ active, sx, ...other }, ref) => {
return (
<WithMuiv6 ref={ref} active={active} sx={sx} {...other}>
<span>Icon</span>
<span>Text</span>
<span>Arrow</span>
</WithMuiv6>
);
});
const WithMuiv6 = styled('ul', {
shouldForwardProp: (prop) => !['active', 'sx'].includes(prop as string),
})<{ active?: boolean }>(({ theme }) => ({
width: 100,
height: 50,
marginBottom: 24,
backgroundColor: theme.palette.info.main,
variants: [
{
props: { active: true },
style: {
backgroundColor: theme.palette.success.main,
},
},
],
}));It is much more cumbersome to define types
instead of https://stackblitz.com/edit/github-p7amox?file=src%2Fapp%2Fpage.tsx,src%2Fapp%2Flayout.tsx |
|
If you use const NavItemv6 = React.forwardRef<
HTMLUListElement,
React.ComponentProps<typeof WithMuiv6>
>(({ active, sx, ...other }, ref) => {
return (
<WithMuiv6 ref={ref} active={active} sx={sx} {...other}>
<span>Icon</span>
<span>Text</span>
<span>Arrow</span>,<li></li>
</WithMuiv6>
);
});And because the const NavItemv6 = React.forwardRef<
HTMLUListElement,
React.ComponentProps<typeof WithMuiv6>
>(({ ...other }, ref) => {
return (
<WithMuiv6 ref={ref} {...other}>
<span>Icon</span>
<span>Text</span>
<span>Arrow</span>,<li></li>
</WithMuiv6>
);
}); |
|
Thanks for your efforts to help so far but in my case Maybe I will use this method. Although it is more cumbersome than the old method (MUI v5), it is more flexible // file.types.ts
export type NavItemProps = BoxProps<'ul'> & {
open?: boolean;
active?: boolean;
};
...
// file.item.ts
const NavItemv6 = forwardRef<HTMLUListElement, NavItemProps>(
({ active, children, open, ...other }, ref) => (
<WithMuiv6 ref={ref} open={open} active={active} {...other}>
{children}
<span> Icon </span>
<span> Text </span>
</WithMuiv6>
)
);
const WithMuiv6 = styled(
forwardRef((props: NavItemProps, ref) => <Box {...props} ref={ref} component="ul" />),
{
shouldForwardProp: (prop) => !['open', 'active'].includes(prop as string),
}
)(({ theme }) => ({
width: 100,
height: 50,
display: 'flex',
marginBottom: 24,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: theme.palette.secondary.main,
variants: [
{
props: { active: true },
style: {
backgroundColor: theme.palette.success.main,
},
},
{
props: { open: true },
style: {
backgroundColor: theme.palette.common.black,
},
},
],
}));
|
|
Building on earlier comments here, I settled on this: // Before
function MyCustomComponent({ component, ...props }: BoxProps) {
return <Box component={component} {...props} />
}
// After
const Bachs = styled('div')()
function MyCustomComponent({ as, ...props }: ComponentProps<typeof Bachs>) {
return <Bachs as={as} {...props} />
}This means I have to refactor my other code to send |
|
Just stumbled upon this section of the docs. Based on that, I ended up with this: import { ElementType } from 'react'
const MyComponent = (boxProps: BoxProps<ElementType, { component?: ElementType }>) => {
return <Box {...boxProps} />
}Or with ref forwarding: import { ElementType, ForwardedRef } from 'react'
const MyComponent = (
boxProps: BoxProps<ElementType, { component?: ElementType }>,
ref: ForwardedRef<ElementType | null>
) => {
return <Box {...boxProps} ref={ref} />
}
const MyComponentWithRef = forwardRef<ElementType | null, BoxProps<ElementType>>(MyComponent)This avoids involved Edit: just noticed my ref solution accepts garbage, e.g. |
DiegoAndai
added
bug 🐛
|
This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Note @mtr1990 How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey. |
|
The fix has been merged, and it will be available starting from the next release ( |
Steps to reproduce
Based on the example provided from MUI
https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs-ts
I have added the following code
I use this method in MUI v5 without any problems. However, the error appears in MUI v6. I read in the documentation that components were removed in MUI v6 https://github.com/mui/material-ui/releases/tag/v6.0.0-rc.0
But I still see the document is still in use:
https://mui.com/material-ui/react-box/#basics
So the component in Box is actually removed?
Current behavior
Error message appears
Expected behavior
No TypeScript errors appeared.
I would like to understand clearly how to use Box in MUI v6.
Because in the project I use a lot of places like:
...
So it will take a lot of time to restructure the whole thing.
Looking forward to suitable suggestions for this situation. Thanks!
The text was updated successfully, but these errors were encountered: