如何将MUI Data Grid的GridToolbarQuickFilter改为轮廓样式文本框？

方案1：全局主题配置（theme.tsx） #

在全局主题中统一修改所有DataGrid的快速筛选输入框样式，无需逐个组件调整：

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  components: {
    MuiDataGrid: {
      styleOverrides: {
        toolbarQuickFilter: {
          // 隐藏默认的filled样式输入框
          '& .MuiFilledInput-root': {
            display: 'none',
          },
          // 为输入框容器添加Outlined样式的边框
          border: '1px solid rgba(0, 0, 0, 0.23)',
          borderRadius: '4px',
          padding: '0 8px',
          // 调整输入框内边距适配边框
          '& input': {
            padding: '8.5px 0',
          },
        },
      },
    },
  },
});

export default theme;

如果上述样式覆盖不生效，更可靠的方式是直接在主题中替换默认的输入组件：

import { createTheme } from '@mui/material/styles';
import { GridToolbarQuickFilter } from '@mui/x-data-grid';
import { TextField } from '@mui/material';

const theme = createTheme({
  components: {
    MuiDataGrid: {
      defaultProps: {
        components: {
          ToolbarQuickFilter: () => (
            <GridToolbarQuickFilter
              InputComponent={(props) => (
                <TextField {...props} variant="outlined" size="small" />
              )}
            />
          ),
        },
      },
    },
  },
});

方案2：局部组件替换 #

如果仅需在单个DataGrid中修改，直接在组件层面配置即可：

import { DataGrid, GridToolbarQuickFilter } from '@mui/x-data-grid';
import { TextField } from '@mui/material';

// 自定义快速筛选组件
const CustomQuickFilter = () => (
  <GridToolbarQuickFilter
    InputComponent={(props) => (
      <TextField {...props} variant="outlined" size="small" placeholder="搜索..." />
    )}
  />
);

// 在DataGrid中使用自定义组件
export default function MyDataGrid() {
  return (
    <DataGrid
      columns={yourColumns}
      rows={yourRows}
      components={{
        ToolbarQuickFilter: CustomQuickFilter,
      }}
      // 其他配置项
    />
  );
}

关于之前类名修改无效的说明 #

GridToolbarQuickFilter内部默认使用filled变体的TextField，对应的样式类是MuiFilledInput-root，如果仅修改MuiOutlinedInput相关类名，无法影响默认的filled样式输入框。需要要么替换输入组件为outlined变体，要么隐藏filled样式并手动添加outlined边框样式。

内容的提问来源于stack exchange，提问作者elafito