review

mui · Nov 14, 2024 · b1ccc35 · b1ccc35
1 parent 48b9e7f
commit b1ccc35
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/packages/x-data-grid/src/components/columnsManagement/GridColumnsManagement.tsx b/packages/x-data-grid/src/components/columnsManagement/GridColumnsManagement.tsx
@@ -5,6 +5,7 @@ import composeClasses from '@mui/utils/composeClasses';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import { styled } from '@mui/material/styles';
 import TextField, { TextFieldProps } from '@mui/material/TextField';
+import { inputBaseClasses } from '@mui/material/InputBase';
 import {
   gridColumnDefinitionsSelector,
   gridColumnVisibilityModelSelector,
@@ -68,6 +69,7 @@ const useUtilityClasses = (ownerState: OwnerState) => {
   const slots = {
     root: ['columnsManagement'],
     header: ['columnsManagementHeader'],
+    searchInput: ['columnsManagementSearchInput'],
     footer: ['columnsManagementFooter'],
     row: ['columnsManagementRow'],
   };
@@ -389,8 +391,12 @@ const GridColumnsManagementHeader = styled('div', {
   padding: theme.spacing(1.5, 3),
 }));
 
-const SearchInput = styled(TextField)<{ ownerState: OwnerState }>(({ theme }) => ({
-  '& .MuiInputBase-root': {
+const SearchInput = styled(TextField, {
+  name: 'MuiDataGrid',
+  slot: 'ColumnsManagementSearchInput',
+  overridesResolver: (props, styles) => styles.columnsManagementSearchInput,
+})<{ ownerState: OwnerState }>(({ theme }) => ({
+  [`& .${inputBaseClasses.root}`]: {
     paddingLeft: theme.spacing(1.5),
   },
   [`& input[type="search"]::-webkit-search-decoration,

diff --git a/packages/x-data-grid/src/constants/gridClasses.ts b/packages/x-data-grid/src/constants/gridClasses.ts
@@ -242,6 +242,10 @@ export interface GridClasses {
    * Styles applied to the columns management header element.
    */
   columnsManagementHeader: string;
+  /**
+   * Styles applied to the columns management search input element.
+   */
+  columnsManagementSearchInput: string;
   /**
    * Styles applied to the columns management footer element.
    */
@@ -720,6 +724,7 @@ export const gridClasses = generateUtilityClasses<GridClassKey>('MuiDataGrid', [
   'columnsManagement',
   'columnsManagementRow',
   'columnsManagementHeader',
+  'columnsManagementSearchInput',
   'columnsManagementFooter',
   'container--top',
   'container--bottom',