[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/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.