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