[material-ui][Popover] Convert to support CSS extraction (#41564)

apps/pigment-css-next-app/src/app/material-ui/react-popover/page.tsx

@@ -0,0 +1,37 @@
+'use client';
+import * as React from 'react';
+import BasicPopover from '../../../../../../docs/data/material/components/popover/BasicPopover';
+import MouseOverPopover from '../../../../../../docs/data/material/components/popover/MouseOverPopover';
+import PopoverPopupState from '../../../../../../docs/data/material/components/popover/PopoverPopupState';
+import VirtualElementPopover from '../../../../../../docs/data/material/components/popover/VirtualElementPopover';
+
+export default function Popover() {
+  return (
+    <React.Fragment>
+      <section>
+        <h2> Basic Popover</h2>
+        <div className="demo-container">
+          <BasicPopover />
+        </div>
+      </section>
+      <section>
+        <h2> Mouse Over Popover</h2>
+        <div className="demo-container">
+          <MouseOverPopover />
+        </div>
+      </section>
+      <section>
+        <h2> Popover Popup State</h2>
+        <div className="demo-container">
+          <PopoverPopupState />
+        </div>
+      </section>
+      <section>
+        <h2> Virtual Element Popover</h2>
+        <div className="demo-container">
+          <VirtualElementPopover />
+        </div>
+      </section>
+    </React.Fragment>
+  );
+}

packages/mui-material/src/Popover/Popover.js

@@ -9,8 +9,7 @@ import refType from '@mui/utils/refType';
 import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';
 import integerPropType from '@mui/utils/integerPropType';
 import chainPropTypes from '@mui/utils/chainPropTypes';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import debounce from '../utils/debounce';
 import ownerDocument from '../utils/ownerDocument';
 import ownerWindow from '../utils/ownerWindow';
@@ -20,6 +19,8 @@ import Modal from '../Modal';
 import PaperBase from '../Paper';
 import { getPopoverUtilityClass } from './popoverClasses';
 
+const useThemeProps = createUseThemeProps('MuiPopover');
+
 export function getOffsetTop(rect, vertical) {
   let offset = 0;