[Rating] Migrate to emotion

docs/pages/api-docs/rating.json

@@ -27,13 +27,15 @@
       },
       "default": "'medium'"
     },
+    "sx": { "type": { "name": "object" } },
     "value": { "type": { "name": "number" } }
   },
   "name": "Rating",
   "styles": {
     "classes": [
       "root",
       "sizeSmall",
+      "sizeMedium",
       "sizeLarge",
       "readOnly",
       "disabled",
@@ -57,6 +59,6 @@
   "filename": "/packages/material-ui/src/Rating/Rating.js",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/components/rating/\">Rating</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }

docs/translations/api-docs/rating/rating.json

@@ -16,6 +16,7 @@
     "precision": "The minimum increment value change allowed.",
     "readOnly": "Removes all hover effects and pointer events.",
     "size": "The size of the 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.",
     "value": "The rating value."
   },
   "classDescriptions": {
@@ -25,6 +26,11 @@
       "nodeName": "the root element",
       "conditions": "<code>size=\"small\"</code>"
     },
+    "sizeMedium": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"medium\"</code>"
+    },
     "sizeLarge": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",

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

@@ -1,5 +1,6 @@
+import { SxProps } from '@material-ui/system';
 import * as React from 'react';
-import { InternalStandardProps as StandardProps } from '..';
+import { InternalStandardProps as StandardProps, Theme } from '..';
 
 export interface IconContainerProps extends React.HTMLAttributes<HTMLSpanElement> {
   value: number;
@@ -15,6 +16,8 @@ export interface RatingProps
     root?: string;
     /** Styles applied to the root element if `size="small"`. */
     sizeSmall?: string;
+    /** Styles applied to the root element if `size="medium"`. */
+    sizeMedium?: string;
     /** Styles applied to the root element if `size="large"`. */
     sizeLarge?: string;
     /** Styles applied to the root element if `readOnly={true}`. */
@@ -126,6 +129,10 @@ export interface RatingProps
    * @default 'medium'
    */
   size?: 'small' | 'medium' | 'large';
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
   /**
    * The rating value.
    */