[Skeleton] Migrate to emotion

docs/pages/api-docs/skeleton.json

@@ -11,6 +11,7 @@
     "classes": { "type": { "name": "object" } },
     "component": { "type": { "name": "elementType" } },
     "height": { "type": { "name": "union", "description": "number<br>&#124;&nbsp;string" } },
+    "sx": { "type": { "name": "object" } },
     "variant": {
       "type": {
         "name": "union",
@@ -41,6 +42,6 @@
   "filename": "/packages/material-ui/src/Skeleton/Skeleton.js",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/components/skeleton/\">Skeleton</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }

docs/translations/api-docs/skeleton/skeleton.json

@@ -6,6 +6,7 @@
     "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "height": "Height of the skeleton. Useful when you don&#39;t want to adapt the skeleton to a text element but for instance a card.",
+    "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.",
     "variant": "The type of content that will be rendered.",
     "width": "Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own."
   },

packages/material-ui-styled-engine-sc/src/index.d.ts

@@ -1,6 +1,9 @@
 export * from 'styled-components';
 export { default } from 'styled-components';
+
 export { default as StyledEngineProvider } from './StyledEngineProvider';
 
+export { ThemeContext, keyframes, css } from 'styled-components';
+
 export { default as GlobalStyles } from './GlobalStyles';
 export * from './GlobalStyles';

packages/material-ui-styled-engine-sc/src/index.js

@@ -11,6 +11,6 @@ export default function styled(tag, options) {
   return scStyled(tag);
 }
 
-export { ThemeContext, keyframes } from 'styled-components';
+export { ThemeContext, keyframes, css } from 'styled-components';
 export { default as StyledEngineProvider } from './StyledEngineProvider';
 export { default as GlobalStyles } from './GlobalStyles';

packages/material-ui-styled-engine/src/index.d.ts

@@ -1,6 +1,6 @@
 export * from '@emotion/styled';
 export { default } from '@emotion/styled';
-export { ThemeContext, keyframes } from '@emotion/react';
+export { ThemeContext, keyframes, css } from '@emotion/react';
 
 export { default as StyledEngineProvider } from './StyledEngineProvider';
 

packages/material-ui-styled-engine/src/index.js

@@ -1,4 +1,4 @@
 export { default } from '@emotion/styled';
-export { ThemeContext, keyframes } from '@emotion/react';
+export { ThemeContext, keyframes, css } from '@emotion/react';
 export { default as StyledEngineProvider } from './StyledEngineProvider';
 export { default as GlobalStyles } from './GlobalStyles';

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

@@ -1,5 +1,7 @@
 import * as React from 'react';
+import { SxProps } from '@material-ui/system';
 import { OverridableStringUnion } from '@material-ui/types';
+import { Theme } from '..';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 
 export interface SkeletonPropsVariantOverrides {}
@@ -45,6 +47,10 @@ export interface SkeletonTypeMap<P = {}, D extends React.ElementType = 'span'> {
      * Useful when you don't want to adapt the skeleton to a text element but for instance a card.
      */
     height?: number | string;
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps<Theme>;
     /**
      * The type of content that will be rendered.
      * @default 'text'