Support CSS extraction

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

@@ -0,0 +1,51 @@
+'use client';
+import * as React from 'react';
+import BasicModal from '../../../../../../docs/data/material/components/modal/BasicModal';
+import KeepMountedModal from '../../../../../../docs/data/material/components/modal/KeepMountedModal';
+import NestedModal from '../../../../../../docs/data/material/components/modal/NestedModal';
+import ServerModal from '../../../../../../docs/data/material/components/modal/ServerModal';
+import SpringModal from '../../../../../../docs/data/material/components/modal/SpringModal';
+import TransitionsModal from '../../../../../../docs/data/material/components/modal/TransitionsModal';
+
+export default function Modal() {
+  return (
+    <React.Fragment>
+      <section>
+        <h2> Basic Modal</h2>
+        <div className="demo-container">
+          <BasicModal />
+        </div>
+      </section>
+      <section>
+        <h2> Keep Mounted Modal</h2>
+        <div className="demo-container">
+          <KeepMountedModal />
+        </div>
+      </section>
+      <section>
+        <h2> Nested Modal</h2>
+        <div className="demo-container">
+          <NestedModal />
+        </div>
+      </section>
+      <section>
+        <h2> Server Modal</h2>
+        <div className="demo-container">
+          <ServerModal />
+        </div>
+      </section>
+      <section>
+        <h2> Spring Modal</h2>
+        <div className="demo-container">
+          <SpringModal />
+        </div>
+      </section>
+      <section>
+        <h2> Transitions Modal</h2>
+        <div className="demo-container">
+          <TransitionsModal />
+        </div>
+      </section>
+    </React.Fragment>
+  );
+}

apps/pigment-vite-app/src/pages/material-ui/react-modal.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import MaterialUILayout from '../../Layout';
+import BasicModal from '../../../../../docs/data/material/components/modal/BasicModal.tsx';
+import KeepMountedModal from '../../../../../docs/data/material/components/modal/KeepMountedModal.tsx';
+import NestedModal from '../../../../../docs/data/material/components/modal/NestedModal.tsx';
+import ServerModal from '../../../../../docs/data/material/components/modal/ServerModal.tsx';
+import SpringModal from '../../../../../docs/data/material/components/modal/SpringModal.tsx';
+import TransitionsModal from '../../../../../docs/data/material/components/modal/TransitionsModal.tsx';
+
+export default function Modal() {
+  return (
+    <MaterialUILayout>
+      <h1>Modal</h1>
+      <section>
+        <h2> Basic Modal</h2>
+        <div className="demo-container">
+          <BasicModal />
+        </div>
+      </section>
+      <section>
+        <h2> Keep Mounted Modal</h2>
+        <div className="demo-container">
+          <KeepMountedModal />
+        </div>
+      </section>
+      <section>
+        <h2> Nested Modal</h2>
+        <div className="demo-container">
+          <NestedModal />
+        </div>
+      </section>
+      <section>
+        <h2> Server Modal</h2>
+        <div className="demo-container">
+          <ServerModal />
+        </div>
+      </section>
+      <section>
+        <h2> Spring Modal</h2>
+        <div className="demo-container">
+          <SpringModal />
+        </div>
+      </section>
+      <section>
+        <h2> Transitions Modal</h2>
+        <div className="demo-container">
+          <TransitionsModal />
+        </div>
+      </section>
+    </MaterialUILayout>
+  );
+}

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

@@ -9,11 +9,12 @@ import { unstable_useModal as useModal } from '@mui/base/unstable_useModal';
 import composeClasses from '@mui/utils/composeClasses';
 import FocusTrap from '../Unstable_TrapFocus';
 import Portal from '../Portal';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import Backdrop from '../Backdrop';
 import { getModalUtilityClass } from './modalClasses';
 
+const useThemeProps = createUseThemeProps('MuiModal');
+
 const useUtilityClasses = (ownerState) => {
   const { open, exited, classes } = ownerState;
 
@@ -33,17 +34,21 @@ const ModalRoot = styled('div', {
 
     return [styles.root, !ownerState.open && ownerState.exited && styles.hidden];
   },
-})(({ theme, ownerState }) => ({
+})(({ theme }) => ({
   position: 'fixed',
   zIndex: (theme.vars || theme).zIndex.modal,
   right: 0,
   bottom: 0,
   top: 0,
   left: 0,
-  ...(!ownerState.open &&
-    ownerState.exited && {
-      visibility: 'hidden',
-    }),
+  variants: [
+    {
+      props: ({ ownerState }) => !ownerState.open && ownerState.exited,
+      style: {
+        visibility: 'hidden',
+      },
+    },
+  ],
 }));
 
 const ModalBackdrop = styled(Backdrop, {