Customization

MUI

Use the MUI adapter when your application already uses Material UI and you want the builder to inherit that component language.

Available entrypoints

@vojtechportes/react-query-builder/mui/v9 is the recommended entrypoint for new Material UI projects and the one used in the demo.
@vojtechportes/react-query-builder/mui/v7 is available for applications that are still on Material UI 7.

Installing MUI

Install the MUI peer dependencies that match the adapter version you want to use. For new setups, prefer mui/v9.

MUI v9 peers

npm install @mui/material@^9.0.1 @mui/icons-material@^9.0.1 @emotion/react @emotion/styled

Using MUI v9

MUI v9 adapter

import '@vojtechportes/react-query-builder/styles.css';
import {
  Builder,
  type DenormalizedQuery,
} from '@vojtechportes/react-query-builder';
import { components } from '@vojtechportes/react-query-builder/mui/v9';

export const MyMuiBuilder = () => {
  const [data, setData] = useState<DenormalizedQuery>(initialData);

  return (
    <Builder
      data={data}
      fields={fields}
      components={components}
      onChange={setData}
    />
  );
};

Supporting MUI v7

If your application is still on Material UI 7, switch the import path to @vojtechportes/react-query-builder/mui/v7.

Starting from the MUI v7 mapping

import {
  components as muiComponents,
  MuiSelect,
} from '@vojtechportes/react-query-builder/mui/v7';

const components = {
  ...muiComponents,
  form: {
    ...muiComponents.form,
    Select: MuiSelect,
  },
};

Extending the MUI adapter

Merging MUI defaults

import '@vojtechportes/react-query-builder/styles.css';
import {
  Builder,
  type DenormalizedQuery,
} from '@vojtechportes/react-query-builder';
import {
  createMuiComponents,
  components as muiComponents,
  MuiSelect,
} from '@vojtechportes/react-query-builder/mui/v9';

const components = createMuiComponents(muiComponents, {
  form: {
    Select: MuiSelect,
  },
});

export const MyMuiBuilder = () => {
  const [data, setData] = useState<DenormalizedQuery>(initialData);

  return (
    <Builder
      data={data}
      fields={fields}
      components={components}
      onChange={setData}
    />
  );
};

Related recipes

MUI DataGrid advanced filtering