[Box] ref missing in TypeScript definition

[levrik]

Type '{ children: Element | Element[] | null; display: string; flexDirection: string; alignItems: string; flex: number; py: number; style: { overflowY: "auto"; }; ref: MutableRefObject<HTMLDivElement | undefined>; }' is not assignable to type 'IntrinsicAttributes & BoxProps & { children?: ReactNode; }'.
  Property 'ref' does not exist on type 'IntrinsicAttributes & BoxProps & { children?: ReactNode; }'.  TS2322

    92 |         boxShadow={4}
    93 |       >
  > 94 |         <Box
       |          ^
    95 |           display="flex"
    96 |           flexDirection="column"
    97 |           alignItems="center"

Latest material-ui 4.3.2

[mayteio]

+1 for this.

[oliviertassinari]

Please provide a full reproduction test case. This would help a lot 👷 .
A live example would be perfect. This codesandbox.io template may be a good starting point. Thank you!

[lcswillems]

Here is a reproduction: https://codesandbox.io/s/strange-khorana-l4m2z

In index.tsx file, there is this error:

No overload matches this call.
  Overload 1 of 2, '(props: BoxProps, context?: any): ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> | Component<...> | null', gave the following error.
    Type '{ ref: MutableRefObject<undefined>; }' is not assignable to type 'IntrinsicAttributes & BoxProps'.
      Property 'ref' does not exist on type 'IntrinsicAttributes & BoxProps'.
  Overload 2 of 2, '(props: PropsWithChildren<BoxProps>, context?: any): ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<...>)> | Component<...> | null', gave the following error.
    Type '{ ref: MutableRefObject<undefined>; }' is not assignable to type 'IntrinsicAttributes & BoxProps & { children?: ReactNode; }'.
      Property 'ref' does not exist on type 'IntrinsicAttributes & BoxProps & { children?: ReactNode; }'.ts(2769)

[n8sabes]

This is a major issue that prevents use of animation libraries such as Greensock/GSAP. ALL MATERIAL-UI GENERATED NODES need the ability to add a ref.

Related: #19284, #19275

For others needing an interim workaround, this seems to work in TypeScript:

// Import style library, either Emotion or Styled-Components
import styled from "@emotion/styled";

// Recreate the Material-UI Box with a styled component
const StyledBox = styled(Box)``;

// Usage in the render
<StyledBox ref={boxRef}>Box Content</StyledBox>

NOTE: Using @material-ui/core/styles does not work, requiring the use of emotion or styled-components. We are forced to use emotion over styled-components due to an animation flicker problem uniquely generated by styled-components.

[b-zurg]

This is a pretty funny issue. Ran into it recently. The material UI docs say that we can add refs to all MUI components but this central component of this ecosystem is missing the type definition for a ref? 🤣

So there's a few ways around this that I see so it's a non-blocking issue:

1. wrap the Box in a div and forward the ref to that div.
2. Use the RootRef component
3. Simply add ref to box (it works) and use a // ts-ignore comment

I hope this can be changed soon. The types for MUI are a bit too complex for me to make a pull request in my available time but I would if I could.

[iCoderXXI]

Actually ref on Box is working. Just typing should be added.

[sunhak-hout]

My little hack comes like this:

const refElement = useRef<HTMLDivElement>();
.
.
.
<Box {...{ ref: refElement }}>
   {children}
</Box>

or still get typescript complained, try this:

<Box {...{ ref: refElement } as any}>
   {children}
</Box>

[oliviertassinari]

I have faced the problem in #22876. From what I understand, we can solve the issue with:

diff --git a/packages/material-ui/src/Box/Box.d.ts b/packages/material-ui/src/Box/Box.d.ts
index 2eb664df6c..7b29a250ea 100644
--- a/packages/material-ui/src/Box/Box.d.ts
+++ b/packages/material-ui/src/Box/Box.d.ts
@@ -37,6 +37,7 @@ export interface BoxProps extends ElementProps, SystemProps {
   // styled API
   component?: React.ElementType;
   clone?: boolean;
+  ref?: React.Ref<unknown>;
   // workaround for https://github.com/mui-org/material-ui/pull/15611
   css?: SystemProps;
 }

Is there anything I'm missing?

[lcswillems]

PR done here: #22925

[dioxmio]

still an issue for me. I just did:

declare module '@material-ui/core/Box' {
    interface BoxProps {
        ref?: React.MutableRefObject<HTMLElement>;
    }
}

with typescript module augmentation it's simple

[oliviertassinari]

still an issue for me

@dioxmio We only solved it in v5.

[rowe-stamy]

this works, too:
const allowedProps = { ref } <Box {...allowedProps } />