[Grid] Generify props with component property (#16590)

* Update SignInSide.js

fix TypeScript check error.

* [Grid] Generify props with component property

* minimize changes

packages/material-ui/src/Grid/Grid.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { Omit } from '@material-ui/types';
-import { StandardProps } from '..';
 import { Breakpoint } from '../styles/createBreakpoints';
+import { OverridableComponent, SimplifiedPropsOf } from '../OverridableComponent';
 
 export type GridItemsAlignment = 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
 
@@ -29,22 +28,7 @@ export type GridWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
 
 export type GridSize = 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 
-export interface GridProps
-  extends StandardProps<
-    React.HTMLAttributes<HTMLElement> & Partial<Record<Breakpoint, boolean | GridSize>>,
-    GridClassKey
-  > {
-  alignContent?: GridContentAlignment;
-  alignItems?: GridItemsAlignment;
-  component?: string | React.ComponentType<Omit<GridProps, StrippedProps>>;
-  container?: boolean;
-  direction?: GridDirection;
-  item?: boolean;
-  justify?: GridJustification;
-  spacing?: GridSpacing;
-  wrap?: GridWrap;
-  zeroMinWidth?: boolean;
-}
+export type GridProps = SimplifiedPropsOf<typeof Grid>;
 
 export type GridClassKey =
   | 'container'
@@ -92,7 +76,21 @@ export type GridClassKey =
   | 'grid-xs-11'
   | 'grid-xs-12';
 
-declare const Grid: React.ComponentType<GridProps>;
+declare const Grid: OverridableComponent<{
+  props: Partial<Record<Breakpoint, boolean | GridSize>> & {
+    alignContent?: GridContentAlignment;
+    alignItems?: GridItemsAlignment;
+    container?: boolean;
+    direction?: GridDirection;
+    item?: boolean;
+    justify?: GridJustification;
+    spacing?: GridSpacing;
+    wrap?: GridWrap;
+    zeroMinWidth?: boolean;
+  };
+  defaultComponent: 'div';
+  classKey: GridClassKey;
+}>;
 
 export default Grid;
 

packages/material-ui/src/Grid/Grid.spec.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import Paper from '@material-ui/core/Paper';
+import Grid from '@material-ui/core/Grid';
+
+function responsiveTest() {
+  <Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square />;
+}