[data grid] Incorrect class name rendered to GridToolbarQuickFilter when customized with GridToolbarContainer

[EvgenyWaveBL]

Steps to reproduce

Link to live example

1. Create custom implementation of toolbar with GridToolbarContainer with GridToolbarQuickFilter
2. use CustomToolbar in toolbar slot

Current behavior

MuiFormControl rendered with class like: css-3be3ve-MuiFormControl-root-MuiTextField-root-MuiDataGrid-toolbarQuickFilter

Expected behavior

MuiFormControl rendered with class like: css-3be3ve-MuiFormControl-root MuiTextField-root MuiDataGrid-toolbarQuickFilter

Context

I am trying to write override styling using themeOptions, themeAugmentation and MuiDataGrid styleOverrides

Your environment

No response

Search keywords: QuickFilter, GridToolbar

[michelengelen]

Hi @EvgenyWaveBL ... thanks for raising this issue.
I can indeed confirm that this is a slight inconsistency.

Since this is a relatively small fix I will add the good first issue label to this.
Following is a diff that will add the correct class to the component:

diff --git a/packages/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx b/packages/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx
index a5ceb6edc..6758d62fb 100644
--- a/packages/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx
+++ b/packages/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx
@@ -3,6 +3,9 @@ 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 generateUtilityClass from '@mui/utils/generateUtilityClass';
+import composeClasses from '@mui/utils/composeClasses';
+import { getDataGridUtilityClass } from '@mui/x-data-grid/constants';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
@@ -71,9 +74,20 @@ export type GridToolbarQuickFilterProps = TextFieldProps & {
   debounceMs?: number;
 };

+const useUtilityClasses = (ownerState: OwnerState) => {
+  const { classes } = ownerState;
+
+  const slots = {
+    root: ['toolbarQuickFilter'],
+  };
+
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
 function GridToolbarQuickFilter(props: GridToolbarQuickFilterProps) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
+  const classes = useUtilityClasses(rootProps);
   const quickFilterValues = useGridSelector(apiRef, gridQuickFilterValuesSelector);

   const {
@@ -141,6 +155,7 @@ function GridToolbarQuickFilter(props: GridToolbarQuickFilterProps) {
       placeholder={apiRef.current.getLocaleText('toolbarQuickFilterPlaceholder')}
       aria-label={apiRef.current.getLocaleText('toolbarQuickFilterLabel')}
       type="search"
+      className={classes.root}
       {...other}
       InputProps={{
         startAdornment: <rootProps.slots.quickFilterIcon fontSize="small" />,

Thanks again for raising this issue! 🙇🏼

[EvgenyWaveBL]

Thanks buckets @michelengelen !

[github-actions]

⚠️ This issue has been closed.
If you have a similar problem, please open a new issue and provide details about your specific problem.
If you can provide additional information related to this topic that could help future readers, please feel free to leave a comment.

How did we do @EvgenyWaveBL?
Your experience with our support team matters to us. If you have a moment, please share your thoughts through our brief survey.