diff --git a/docs/pages/api-docs/popper.json b/docs/pages/api-docs/popper.json
index 975dc7088159e0..4c6a023308c363 100644
--- 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<func
| object
| bool>
| func
| 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
index 97ced3a899d087..51492d0c552d96 100644
--- 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<func
| object
| bool>
| func
| 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
index e990bb94b95c4c..d8946bd933bbd9 100644
--- 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 Popper.js
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 `sx` page 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
index 3cec378acf9704..21f60448388d0a 100644
--- 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 & {
+ /**
+ * The system prop that allows defining system overrides as well as additional CSS styles.
+ */
+ sx?: SxProps;
+};
-export type PopperProps = Omit;
+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 ;
+ return ;
});
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