Make GridToolbarQuickFilter textbox outlined (Material UI v5)

Question

Is there a way to make the GridToolbarQuickFilter textbox outlined? Preferably from theme.tsx but any suggestions are welcome.

I have tried different ways of doing it like modifying classes in theme.tsx but nothing changes the way it looks.

Answer 1

You can control the variant of the quick filter via slotProps={{toolbar: {quickFilterProps: { variant: "outlined" }}}} as shown in the working example below.

import * as React from "react";
import Box from "@mui/material/Box";
import { DataGrid, GridToolbar } from "@mui/x-data-grid";
import { useDemoData } from "@mui/x-data-grid-generator";

const VISIBLE_FIELDS = ["name", "rating", "country", "dateCreated", "isAdmin"];

export default function QuickFilteringGrid() {
  const { data } = useDemoData({
    dataSet: "Employee",
    visibleFields: VISIBLE_FIELDS,
    rowLength: 100
  });

  // Otherwise filter will be applied on fields such as the hidden column id
  const columns = React.useMemo(
    () =>
      data.columns.filter((column) => VISIBLE_FIELDS.includes(column.field)),
    [data.columns]
  );

  return (
    <Box sx={{ height: 400, width: 1 }}>
      <DataGrid
        {...data}
        columns={columns}
        slots={{ toolbar: GridToolbar }}
        slotProps={{
          toolbar: {
            showQuickFilter: true,
            quickFilterProps: {
              variant: "outlined",
              size: "small"
            }
          }
        }}
      />
    </Box>
  );
}

To control this in the theme, leverage the defaultProps aspect of the theme as shown below:

import * as React from "react";
import type {} from "@mui/x-data-grid/themeAugmentation";
import Box from "@mui/material/Box";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import { DataGrid, GridToolbar } from "@mui/x-data-grid";
import { useDemoData } from "@mui/x-data-grid-generator";

const VISIBLE_FIELDS = ["name", "rating", "country", "dateCreated", "isAdmin"];

const theme = createTheme({
  components: {
    MuiDataGrid: {
      defaultProps: {
        slots: {
          toolbar: GridToolbar
        },
        slotProps: {
          toolbar: {
            showQuickFilter: true,
            quickFilterProps: {
              variant: "outlined",
              size: "small"
            }
          }
        }
      }
    }
  }
});
export default function QuickFilteringGrid() {
  const { data } = useDemoData({
    dataSet: "Employee",
    visibleFields: VISIBLE_FIELDS,
    rowLength: 100
  });

  // Otherwise filter will be applied on fields such as the hidden column id
  const columns = React.useMemo(
    () =>
      data.columns.filter((column) => VISIBLE_FIELDS.includes(column.field)),
    [data.columns]
  );

  return (
    <ThemeProvider theme={theme}>
      <Box sx={{ height: 400, width: 1 }}>
        <DataGrid {...data} columns={columns} />
      </Box>
    </ThemeProvider>
  );
}