[DataGrid] Fix missing class name in the GridToolbarQuickFilter com…

…ponent (mui#12484)

Co-authored-by: Rom Grk <[email protected]>

packages/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx

@@ -1,8 +1,11 @@
 import * as React from 'react';
+import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import TextField, { TextFieldProps } from '@mui/material/TextField';
 import { styled } from '@mui/material/styles';
 import { unstable_debounce as debounce } from '@mui/utils';
+import composeClasses from '@mui/utils/composeClasses';
+import { getDataGridUtilityClass } from '../../constants';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
@@ -13,6 +16,16 @@ import { isDeepEqual } from '../../utils/utils';
 
 type OwnerState = DataGridProcessedProps;
 
+const useUtilityClasses = (ownerState: OwnerState) => {
+  const { classes } = ownerState;
+
+  const slots = {
+    root: ['toolbarQuickFilter'],
+  };
+
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
 const GridToolbarQuickFilterRoot = styled(TextField, {
   name: 'MuiDataGrid',
   slot: 'ToolbarQuickFilter',
@@ -74,12 +87,14 @@ export type GridToolbarQuickFilterProps = TextFieldProps & {
 function GridToolbarQuickFilter(props: GridToolbarQuickFilterProps) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
+  const classes = useUtilityClasses(rootProps);
   const quickFilterValues = useGridSelector(apiRef, gridQuickFilterValuesSelector);
 
   const {
     quickFilterParser = defaultSearchValueParser,
     quickFilterFormatter = defaultSearchValueFormatter,
     debounceMs = rootProps.filterDebounceMs,
+    className,
     ...other
   } = props;
 
@@ -138,6 +153,7 @@ function GridToolbarQuickFilter(props: GridToolbarQuickFilterProps) {
       variant="standard"
       value={searchValue}
       onChange={handleSearchValueChange}
+      className={clsx(className, classes.root)}
       placeholder={apiRef.current.getLocaleText('toolbarQuickFilterPlaceholder')}
       aria-label={apiRef.current.getLocaleText('toolbarQuickFilterLabel')}
       type="search"