[Divider] Migrate to emotion (mui#24558)

eps1lon · Jan 25, 2021 · 8b5fb3c · 8b5fb3c
1 parent cddb12b
commit 8b5fb3c
Show file tree

Hide file tree

Showing 9 changed files with 269 additions and 150 deletions.
diff --git a/docs/pages/api-docs/divider.json b/docs/pages/api-docs/divider.json
@@ -10,6 +10,7 @@
       "type": { "name": "enum", "description": "'horizontal'<br>&#124;&nbsp;'vertical'" },
       "default": "'horizontal'"
     },
+    "sx": { "type": { "name": "object" } },
     "textAlign": {
       "type": {
         "name": "enum",
@@ -51,6 +52,6 @@
   "filename": "/packages/material-ui/src/Divider/Divider.js",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/components/dividers/\">Dividers</a></li>\n<li><a href=\"/components/lists/\">Lists</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }
diff --git a/docs/translations/api-docs/divider/divider.json b/docs/translations/api-docs/divider/divider.json
@@ -8,6 +8,7 @@
     "flexItem": "If <code>true</code>, a vertical divider will have the correct height when used in flex container. (By default, a vertical divider will have a calculated height of <code>0px</code> if it is the child of a flex container.)",
     "light": "If <code>true</code>, the divider will have a lighter color.",
     "orientation": "The component orientation.",
+    "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.",
     "textAlign": "The text alignment.",
     "variant": "The variant to use."
   },

diff --git a/packages/material-ui/src/Divider/Divider.d.ts b/packages/material-ui/src/Divider/Divider.d.ts
@@ -1,4 +1,6 @@
 import { OverridableStringUnion } from '@material-ui/types';
+import { SxProps } from '@material-ui/system';
+import { Theme } from '..';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 
 export interface DividerPropsVariantOverrides {}
@@ -64,6 +66,10 @@ export interface DividerTypeMap<P = {}, D extends React.ElementType = 'hr'> {
      * @default 'horizontal'
      */
     orientation?: 'horizontal' | 'vertical';
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps<Theme>;
     /**
      * The text alignment.
      * @default 'center'