[system] <Box component={Paper} square> throws unasignable type

[mayteio]

What it says on the tin - using typescript

• [√] This is not a v0.x issue.
• [√] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

Shouldn't complain when passing attributes component should accept

Current Behavior 😯

Does complain:

Type '{ children: Element; component: ComponentType<PaperProps>; square: true; className: string; }' is not assignable to type 'IntrinsicAttributes & BoxProps & { children?: ReactNode; }'.
  Property 'square' does not exist on type 'IntrinsicAttributes & BoxProps & { children?: ReactNode; }

Steps to Reproduce 🕹

https://codesandbox.io/s/kind-haslett-38ykt

Context 🔦

I want to leverage the awesome attributes Box gives me whilst using other components, for example;

<Box 
  component={Paper} 
  minHeight={320} // <Box /> prop
  square // <Paper /> prop
/>

From the typescript guide:

Not every component fully supports any component type you pass in. If you encounter a component that rejects its component props in TypeScript please open an issue. There is an ongoing effort to fix this by making component props generic.

Your Environment 🌎

Tech	Version
Material-UI	v5.0.0.alpha.13
React	1.6.8
Browser	Chrome 75
TypeScript	3.5.3

[MatthieuCoelho]

I confirm this issue sill exist.

[mnajdova]

For tracking, the issue exists with primitive component values as well. For example:

<Box
  component="img"
  src="https://tailwindcss.com/_next/static/media/erin-lindford.4804b52007ca82ebe9999d19c717b44d.jpg"
/>

First reported in #23053 (comment)

[cyrilchapon]

Temporary workaround (here with a <form> component)

import { FunctionComponent, FormHTMLAttributes } from 'react'
import { Box, BoxProps } from '@material-ui/core'

type FormBoxProps = BoxProps & FormHTMLAttributes<HTMLFormElement>

export const FormBox: FunctionComponent<FormBoxProps> = (props) => (
  <Box {...props} component='form' />
)