[material-ui][FormControl] Convert to support CSS extraction

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

@@ -3,14 +3,15 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { isFilled, isAdornedStart } from '../InputBase/utils';
 import capitalize from '../utils/capitalize';
 import isMuiElement from '../utils/isMuiElement';
 import FormControlContext from './FormControlContext';
 import { getFormControlUtilityClasses } from './formControlClasses';
 
+const useThemeProps = createUseThemeProps('MuiFormControl');
+
 const useUtilityClasses = (ownerState) => {
   const { classes, margin, fullWidth } = ownerState;
   const slots = {
@@ -30,7 +31,7 @@ const FormControlRoot = styled('div', {
       ...(ownerState.fullWidth && styles.fullWidth),
     };
   },
-})(({ ownerState }) => ({
+})({
   display: 'inline-flex',
   flexDirection: 'column',
   position: 'relative',
@@ -40,18 +41,29 @@ const FormControlRoot = styled('div', {
   margin: 0,
   border: 0,
   verticalAlign: 'top', // Fix alignment issue on Safari.
-  ...(ownerState.margin === 'normal' && {
-    marginTop: 16,
-    marginBottom: 8,
-  }),
-  ...(ownerState.margin === 'dense' && {
-    marginTop: 8,
-    marginBottom: 4,
-  }),
-  ...(ownerState.fullWidth && {
-    width: '100%',
-  }),
-}));
+  variants: [
+    {
+      props: { margin: 'normal' },
+      style: {
+        marginTop: 16,
+        marginBottom: 8,
+      },
+    },
+    {
+      props: { margin: 'dense' },
+      style: {
+        marginTop: 8,
+        marginBottom: 4,
+      },
+    },
+    {
+      props: { fullWidth: true },
+      style: {
+        width: '100%',
+      },
+    },
+  ],
+});
 
 /**
  * Provides context such as filled/focused/error/required for form inputs.

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

@@ -5,16 +5,17 @@ import clsx from 'clsx';
 import refType from '@mui/utils/refType';
 import composeClasses from '@mui/utils/composeClasses';
 import { useFormControl } from '../FormControl';
+import { styled, createUseThemeProps } from '../zero-styled';
 import Stack from '../Stack';
 import Typography from '../Typography';
 import capitalize from '../utils/capitalize';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
 import formControlLabelClasses, {
   getFormControlLabelUtilityClasses,
 } from './formControlLabelClasses';
 import formControlState from '../FormControl/formControlState';
 
+const useThemeProps = createUseThemeProps('MuiFormControlLabel');
+
 const useUtilityClasses = (ownerState) => {
   const { classes, disabled, labelPlacement, error, required } = ownerState;
   const slots = {
@@ -44,7 +45,7 @@ export const FormControlLabelRoot = styled('label', {
       styles[`labelPlacement${capitalize(ownerState.labelPlacement)}`],
     ];
   },
-})(({ theme, ownerState }) => ({
+})(({ theme }) => ({
   display: 'inline-flex',
   alignItems: 'center',
   cursor: 'pointer',
@@ -56,24 +57,39 @@ export const FormControlLabelRoot = styled('label', {
   [`&.${formControlLabelClasses.disabled}`]: {
     cursor: 'default',
   },
-  ...(ownerState.labelPlacement === 'start' && {
-    flexDirection: 'row-reverse',
-    marginLeft: 16, // used for row presentation of radio/checkbox
-    marginRight: -11,
-  }),
-  ...(ownerState.labelPlacement === 'top' && {
-    flexDirection: 'column-reverse',
-    marginLeft: 16,
-  }),
-  ...(ownerState.labelPlacement === 'bottom' && {
-    flexDirection: 'column',
-    marginLeft: 16,
-  }),
   [`& .${formControlLabelClasses.label}`]: {
     [`&.${formControlLabelClasses.disabled}`]: {
       color: (theme.vars || theme).palette.text.disabled,
     },
   },
+  variants: [
+    {
+      props: { labelPlacement: 'start' },
+      style: {
+        flexDirection: 'row-reverse',
+        marginRight: -11,
+      },
+    },
+    {
+      props: { labelPlacement: 'top' },
+      style: {
+        flexDirection: 'column-reverse',
+      },
+    },
+    {
+      props: { labelPlacement: 'bottom' },
+      style: {
+        flexDirection: 'column',
+      },
+    },
+    {
+      props: ({ labelPlacement }) =>
+        labelPlacement === 'start' || labelPlacement === 'top' || labelPlacement === 'bottom',
+      style: {
+        marginLeft: 16, // used for row presentation of radio/checkbox
+      },
+    },
+  ],
 }));
 
 const AsteriskComponent = styled('span', {