Fix component prop and tests

Author: mj12albert

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

@@ -5,6 +5,7 @@ import { describeConformance, act, createRenderer, fireEvent } from '@mui-intern
 import FormControl, { formControlClasses as classes } from '@mui/material-next/FormControl';
 // TODO v6: replace with material-next/FilledInput
 import InputBase from '@mui/material-next/InputBase';
+import { CssVarsProvider, extendTheme } from '@mui/material-next/styles';
 // TODO v6: replace with material-next/Select
 import Select from '@mui/material/Select';
 import useFormControl from './useFormControl';
@@ -23,6 +24,8 @@ describe('<FormControl />', () => {
   describeConformance(<FormControl />, () => ({
     classes,
     inheritComponent: 'div',
+    ThemeProvider: CssVarsProvider,
+    createTheme: extendTheme,
     render,
     refInstanceof: window.HTMLDivElement,
     muiName: 'MuiFormControl',
@@ -32,6 +35,7 @@ describe('<FormControl />', () => {
         testWithElement: 'fieldset',
       },
     },
+    testRootOverrides: { slotName: 'root', slotClassName: classes.root },
     testComponentPropWith: 'fieldset',
     testVariantProps: { margin: 'dense' },
     skip: ['componentsProp'],

packages/mui-material-next/src/FormControl/FormControl.tsx

@@ -90,7 +90,7 @@ const FormControl = React.forwardRef(function FormControl<
     className,
     classes: classesProp,
     color = 'primary',
-    component: ComponentProp = 'div',
+    component: componentProp,
     disabled = false,
     error = false,
     focused: visuallyFocused,
@@ -184,7 +184,7 @@ const FormControl = React.forwardRef(function FormControl<
     ...props,
     classes: props.classes ?? {},
     color,
-    component: ComponentProp,
+    component: componentProp,
     disabled,
     error,
     filled,
@@ -242,13 +242,14 @@ const FormControl = React.forwardRef(function FormControl<
     variant,
   ]);
 
-  const Root = slots.root ?? ComponentProp ?? FormControlRoot;
+  const Root = slots.root ?? FormControlRoot;
   const rootProps = useSlotProps({
     elementType: Root,
     externalSlotProps: slotProps.root,
     externalForwardedProps: other,
     additionalProps: {
       ref: forwardedRef,
+      as: componentProp,
     },
     ownerState,
     className: [classes.root, className],