Customization

MUI

MUI v9 adapter usage

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

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

MUI v7 import

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

createMuiComponents

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

const components = createMuiComponents(muiComponents, {
  form: {
    Input: MyInput,
  },
  Add: MyAddButton,
});

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

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

Available entrypoints

@vojtechportes/react-query-builder/mui/v9 Recommended Material UI adapter for new projects.
@vojtechportes/react-query-builder/mui/v7 Material UI adapter for applications still on MUI 7.

Exports

components Ready-made MUI component mapping for Builder.
Individual mapped components Named exports such as MuiSelect, MuiInput, and related MUI-backed controls for partial overrides.
createMuiComponents Merges MUI defaults with local overrides while preserving nested form keys.

Documentation

MUI adapter guide.

Related recipes

MUI DataGrid advanced filtering