From 7bb5926005a134a6a994bff6837253a6b746342f Mon Sep 17 00:00:00 2001
From: ivan-ngchakming <ivan.ng.chak.ming@gmail.com>
Date: Wed, 16 Mar 2022 20:57:26 +0800
Subject: [PATCH 1/4] feat: expose `sx` prop

---
 packages/mui-material/src/Popper/Popper.tsx | 26 ++++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/packages/mui-material/src/Popper/Popper.tsx b/packages/mui-material/src/Popper/Popper.tsx
index 3cec378acf9704..8beb1c6adb9814 100644
--- a/packages/mui-material/src/Popper/Popper.tsx
+++ b/packages/mui-material/src/Popper/Popper.tsx
@@ -2,10 +2,22 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import PopperUnstyled, { PopperUnstyledProps } from '@mui/base/PopperUnstyled';
 import { HTMLElementType, refType } from '@mui/utils';
-import { Direction, useThemeWithoutDefault as useTheme } from '@mui/system';
+import { Direction, useThemeWithoutDefault as useTheme, SxProps } from '@mui/system';
 import useThemeProps from '../styles/useThemeProps';
+import { Theme, styled } from '../styles';
 
-export type PopperProps = Omit<PopperUnstyledProps, 'direction'>;
+export type PopperProps = Omit<PopperUnstyledProps, 'direction'> & {
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+};
+
+const PopperRoot = styled(PopperUnstyled, {
+  name: 'MuiPopper',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root,
+})({});
 
 /**
  *
@@ -25,7 +37,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 +173,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

From 56c71e2c811bf42c87ed5e20c1739fdfa59546b6 Mon Sep 17 00:00:00 2001
From: ivan-ngchakming <ivan.ng.chak.ming@gmail.com>
Date: Wed, 16 Mar 2022 20:57:39 +0800
Subject: [PATCH 2/4] feat: update api docs

---
 docs/pages/api-docs/popper.json               | 6 ++++++
 docs/pages/material-ui/api/popper.json        | 6 ++++++
 docs/translations/api-docs/popper/popper.json | 1 +
 3 files changed, 13 insertions(+)

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&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
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&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
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 <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."
   },

From e8fb03237a6bb96114670d4741b4b818cc99c924 Mon Sep 17 00:00:00 2001
From: ivan-ngchakming <ivan.ng.chak.ming@gmail.com>
Date: Thu, 17 Mar 2022 18:02:17 +0800
Subject: [PATCH 3/4] refactor: use absolute import for Theme and styled

---
 packages/mui-material/src/Popper/Popper.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mui-material/src/Popper/Popper.tsx b/packages/mui-material/src/Popper/Popper.tsx
index 8beb1c6adb9814..44f092ce6110f4 100644
--- a/packages/mui-material/src/Popper/Popper.tsx
+++ b/packages/mui-material/src/Popper/Popper.tsx
@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import PopperUnstyled, { PopperUnstyledProps } from '@mui/base/PopperUnstyled';
 import { HTMLElementType, refType } from '@mui/utils';
 import { Direction, useThemeWithoutDefault as useTheme, SxProps } from '@mui/system';
+import { Theme, styled } from '@mui/material/styles';
 import useThemeProps from '../styles/useThemeProps';
-import { Theme, styled } from '../styles';
 
 export type PopperProps = Omit<PopperUnstyledProps, 'direction'> & {
   /**

From eada4f9cb20d68491bb19ea41f4469d3179107a7 Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Fri, 18 Mar 2022 11:23:20 +0000
Subject: [PATCH 4/4] Change import and run prettier

---
 packages/mui-material/src/Popper/Popper.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/mui-material/src/Popper/Popper.tsx b/packages/mui-material/src/Popper/Popper.tsx
index 44f092ce6110f4..21f60448388d0a 100644
--- a/packages/mui-material/src/Popper/Popper.tsx
+++ b/packages/mui-material/src/Popper/Popper.tsx
@@ -1,10 +1,9 @@
-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, SxProps } from '@mui/system';
-import { Theme, styled } from '@mui/material/styles';
-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'> & {
   /**