Сделайте текстовое поле GridToolbarQuickFilter обведенным (Material UI v5)

Question

Есть ли способ выделить текстовое поле GridToolbarQuickFilter? Предпочтительно из theme.tsx, но любые предложения приветствуются.

Я пробовал разные способы сделать это, например, изменять классы в theme.tsx, но ничего не меняет его внешний вид.

Answer 1

Вы можете управлять вариантом быстрого фильтра черезslotProps={{toolbar: {quickFilterProps: { variant: "outlined" }}}}как показано в рабочем примере ниже.

      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>
  );
}

Чтобы контролировать это в теме, используйтеdefaultPropsаспект темы, как показано ниже:

      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>
  );
}