[Popper] Expose the sx prop (#31833)

mui · Mar 21, 2022 · c843845 · c843845
1 parent 13d3aa0
commit c843845
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 6 deletions.
diff --git a/docs/pages/api-docs/popper.json b/docs/pages/api-docs/popper.json
@@ -36,6 +36,12 @@
       "default": "{}"
     },
     "popperRef": { "type": { "name": "custom", "description": "ref" } },
+    "sx": {
+      "type": {
+        "name": "union",
+        "description": "Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object"
+      }
+    },
     "transition": { "type": { "name": "bool" } }
   },
   "name": "Popper",

diff --git a/docs/pages/material-ui/api/popper.json b/docs/pages/material-ui/api/popper.json
@@ -36,6 +36,12 @@
       "default": "{}"
     },
     "popperRef": { "type": { "name": "custom", "description": "ref" } },
+    "sx": {
+      "type": {
+        "name": "union",
+        "description": "Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object"
+      }
+    },
     "transition": { "type": { "name": "bool" } }
   },
   "name": "Popper",

diff --git a/docs/translations/api-docs/popper/popper.json b/docs/translations/api-docs/popper/popper.json
@@ -11,6 +11,7 @@
     "placement": "Popper placement.",
     "popperOptions": "Options provided to the <a href=\"https://popper.js.org/docs/v2/constructors/#options\"><code>Popper.js</code></a> instance.",
     "popperRef": "A ref that points to the used popper instance.",
+    "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/the-sx-prop/\">`sx` page</a> for more details.",
     "transition": "Help supporting a react-transition-group/Transition component.",
     "direction": "Direction of the text."
   },

diff --git a/packages/mui-material/src/Popper/Popper.tsx b/packages/mui-material/src/Popper/Popper.tsx
@@ -1,11 +1,22 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
 import PopperUnstyled, { PopperUnstyledProps } from '@mui/base/PopperUnstyled';
+import { Direction, SxProps, useThemeWithoutDefault as useTheme } from '@mui/system';
 import { HTMLElementType, refType } from '@mui/utils';
-import { Direction, useThemeWithoutDefault as useTheme } from '@mui/system';
-import useThemeProps from '../styles/useThemeProps';
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import { styled, Theme, useThemeProps } from '../styles';
+
+export type PopperProps = Omit<PopperUnstyledProps, 'direction'> & {
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+};
 
-export type PopperProps = Omit<PopperUnstyledProps, 'direction'>;
+const PopperRoot = styled(PopperUnstyled, {
+  name: 'MuiPopper',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root,
+})({});
 
 /**
  *
@@ -25,7 +36,7 @@ const Popper = React.forwardRef(function Popper(
 ) {
   const theme = useTheme<{ direction?: Direction }>();
   const props = useThemeProps({ props: inProps, name: 'MuiPopper' });
-  return <PopperUnstyled direction={theme?.direction} {...props} ref={ref} />;
+  return <PopperRoot direction={theme?.direction} {...props} ref={ref} />;
 });
 
 Popper.propTypes /* remove-proptypes */ = {
@@ -161,6 +172,14 @@ Popper.propTypes /* remove-proptypes */ = {
    * A ref that points to the used popper instance.
    */
   popperRef: refType,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])),
+    PropTypes.func,
+    PropTypes.object,
+  ]),
   /**
    * Help supporting a react-transition-group/Transition component.
    * @default false