[material-ui][Backdrop] Convert to support CSS extraction (#41581)

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

@@ -0,0 +1,13 @@
+'use client';
+import SimpleBackdrop from '../../../../../../docs/data/material/components/backdrop/SimpleBackdrop';
+
+export default function Backdrop() {
+  return (
+    <section>
+      <h2> Simple Backdrop</h2>
+      <div className="demo-container">
+        <SimpleBackdrop />
+      </div>
+    </section>
+  );
+}

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

@@ -3,12 +3,13 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import useSlot from '../utils/useSlot';
 import Fade from '../Fade';
 import { getBackdropUtilityClass } from './backdropClasses';
 
+const useThemeProps = createUseThemeProps('MuiBackdrop');
+
 const useUtilityClasses = (ownerState) => {
   const { classes, invisible } = ownerState;
 
@@ -27,7 +28,7 @@ const BackdropRoot = styled('div', {
 
     return [styles.root, ownerState.invisible && styles.invisible];
   },
-})(({ ownerState }) => ({
+})({
   position: 'fixed',
   display: 'flex',
   alignItems: 'center',
@@ -38,10 +39,15 @@ const BackdropRoot = styled('div', {
   left: 0,
   backgroundColor: 'rgba(0, 0, 0, 0.5)',
   WebkitTapHighlightColor: 'transparent',
-  ...(ownerState.invisible && {
-    backgroundColor: 'transparent',
-  }),
-}));
+  variants: [
+    {
+      props: { invisible: true },
+      style: {
+        backgroundColor: 'transparent',
+      },
+    },
+  ],
+});
 
 const Backdrop = React.forwardRef(function Backdrop(inProps, ref) {
   const props = useThemeProps({ props: inProps, name: 'MuiBackdrop' });