[Grid] Migrate to emotion

docs/pages/api-docs/grid.json

@@ -61,6 +61,7 @@
       },
       "default": "0"
     },
+    "sx": { "type": { "name": "object" } },
     "wrap": {
       "type": {
         "name": "enum",
@@ -143,5 +144,5 @@
   "filename": "/packages/material-ui/src/Grid/Grid.js",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/components/grid/\">Grid</a></li></ul>",
-  "styledComponent": false
+  "styledComponent": true
 }

docs/scripts/buildApi.ts

@@ -709,8 +709,15 @@ async function updateStylesDefinition(context: {
             if (members) {
               styles.descriptions = styles.descriptions || {};
               members.forEach((member) => {
-                const className = ((member as babel.types.TSPropertySignature)
+                let className = ((member as babel.types.TSPropertySignature)
                   .key as babel.types.Identifier).name;
+
+                if (!className) {
+                  // Necessary for classes defined as kebab case
+                  className = ((member as babel.types.TSPropertySignature)
+                    .key as babel.types.StringLiteral).value;
+                }
+
                 styles.classes.push(className);
                 if (member.leadingComments) {
                   styles.descriptions[className] = trimComment(member.leadingComments[0].value);

docs/translations/api-docs/grid/grid.json

@@ -14,6 +14,7 @@
     "md": "Defines the number of grids the component is going to use. It&#39;s applied for the <code>md</code> breakpoint and wider screens if not overridden.",
     "sm": "Defines the number of grids the component is going to use. It&#39;s applied for the <code>sm</code> breakpoint and wider screens if not overridden.",
     "spacing": "Defines the space between the type <code>item</code> component. It can only be used on a type <code>container</code> component.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/basics/#the-sx-prop\">`sx` page</a> for more details.",
     "wrap": "Defines the <code>flex-wrap</code> style property. It&#39;s applied for all screen sizes.",
     "xl": "Defines the number of grids the component is going to use. It&#39;s applied for the <code>xl</code> breakpoint and wider screens.",
     "xs": "Defines the number of grids the component is going to use. It&#39;s applied for all the screen sizes with the lowest priority.",

packages/material-ui-utils/src/requirePropFactory.d.ts

@@ -1 +1,6 @@
-export default function requirePropFactory(componentNameInError: string): any;
+import * as React from 'react';
+
+export default function requirePropFactory(
+  componentNameInError: string,
+  Component?: React.ComponentType
+): any;

packages/material-ui-utils/src/requirePropFactory.js

@@ -1,4 +1,4 @@
-export default function requirePropFactory(componentNameInError) {
+export default function requirePropFactory(componentNameInError, Component) {
   if (process.env.NODE_ENV === 'production') {
     return () => null;
   }
@@ -12,14 +12,28 @@ export default function requirePropFactory(componentNameInError) {
   ) => {
     const propFullNameSafe = propFullName || propName;
 
+    // eslint-disable-next-line react/forbid-foreign-prop-types
+    const defaultTypeChecker = Component?.propTypes?.[propFullNameSafe];
+    let defaultTypeCheckerResult = null;
+
+    if (defaultTypeChecker) {
+      defaultTypeCheckerResult = defaultTypeChecker(
+        props,
+        propName,
+        componentName,
+        location,
+        propFullName,
+      );
+    }
+
     if (typeof props[propName] !== 'undefined' && !props[requiredProp]) {
       return new Error(
         `The prop \`${propFullNameSafe}\` of ` +
           `\`${componentNameInError}\` can only be used together with the \`${requiredProp}\` prop.`,
       );
     }
 
-    return null;
+    return defaultTypeCheckerResult;
   };
   return requireProp;
 }

packages/material-ui-utils/src/requirePropFactory.test.js

@@ -1,4 +1,5 @@
 import { expect } from 'chai';
+import { spy } from 'sinon';
 import requirePropFactory from './requirePropFactory';
 
 describe('requirePropFactory', () => {
@@ -83,6 +84,32 @@ describe('requirePropFactory', () => {
           });
         });
       });
+
+      it('should chain the proptypes with the default prop types coming from the component', () => {
+        const Test = () => null;
+        const mock = spy();
+        Test.propTypes = {
+          test: mock,
+        };
+
+        const customProps = {};
+        const customPropName = 'test';
+        customProps[customPropName] = true;
+
+        const customRequireProp = requirePropFactory('Test', Test);
+
+        const result = customRequireProp('otherProp');
+        result(customProps, customPropName, undefined, undefined, undefined);
+
+        expect(mock.callCount).to.equal(1);
+        expect(mock.args[0]).to.deep.equal([
+          customProps,
+          customPropName,
+          undefined,
+          undefined,
+          undefined,
+        ]);
+      });
     });
   });
 });

packages/material-ui/src/Button/Button.js

@@ -34,7 +34,7 @@ const overridesResolver = (props, styles) => {
 };
 
 const useUtilityClasses = (styleProps) => {
-  const { color, disableElevation, fullWidth, size, variant, classes = {} } = styleProps;
+  const { color, disableElevation, fullWidth, size, variant, classes } = styleProps;
 
   const slots = {
     root: [

packages/material-ui/src/ButtonBase/ButtonBase.js

@@ -21,7 +21,7 @@ const overridesResolver = (props, styles) => {
 };
 
 const useUtilityClasses = (styleProps) => {
-  const { disabled, focusVisible, focusVisibleClassName, classes = {} } = styleProps;
+  const { disabled, focusVisible, focusVisibleClassName, classes } = styleProps;
 
   const slots = {
     root: ['root', disabled && 'disabled', focusVisible && 'focusVisible'],

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

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { SxProps } from '@material-ui/system';
+import { Theme } from '../styles';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 
 export type GridItemsAlignment = 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
@@ -170,6 +172,10 @@ export interface GridTypeMap<P = {}, D extends React.ElementType = 'div'> {
      * @default 0
      */
     spacing?: GridSpacing;
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps<Theme>;
     /**
      * Defines the `flex-wrap` style property.
      * It's applied for all screen sizes.