Unable to apply muiTheme with QueryBuilder

First of all, I would like to thank for this amazing library. We have been struggling with our dashboard in which there was a native filter input so that our users can provide mongo-db queries when fetching resources. But its usability was a pain in the ass until we found this library to build nice DSL with forms. Now users can just ask anything without knowing the mongo db query syntax. However, as our frontend theme was only dark, the some default text colors (especially Select) were barely visible so we tried to change it through muiTheme which will be passed to wrapper ThemeProvider for QueryBuilder. To our surprise nothing seems to work, can you please help or at least show guidance how to achieve our goal. Thanks in advance!

I checked query-builder source code, I am not sure but it seems to me there is no way to customize muiTheme from outside. Maybe I missed something! Also I installed query-builder in a new clean react project but got same result!

Here is relevant code snippets from our codebase:

// just tried every possible way, here is just some samples
const muiTheme = createTheme({
  palette: {
    primary: {
      main: "#fff",
      light: "#fff",
    },
    text: {
      primary: "#fff",
      secondary: "#fff",
      disabled: "#fff",
    },
  },
  components: {
    MuiInput: {
      styleOverrides: {
        root: {
          color: "#fff",
        },
      },
    },
    MuiFormControl: {
      styleOverrides: {
        root: {
          color: "#fff",
        },
      },
    },

    MuiSelect: {
      styleOverrides: {
        standard: {
          color: "#fff",
        },
      },
    },
  },
});

<Container>
  <Typography>{filterName} filter</Typography>
  <ThemeProvider theme={muiTheme}>
    <QueryBuilder
      disabled={queryDisabled}
      fields={fields}
      query={query}
      operators={operators}
      combinators={combinators}
      onQueryChange={handleQueryChange}
      controlElements={materialControlElements}
    />
  </ThemeProvider>
</Container>

Here is the screenshot of our dashboard:

[jakeboone02]

@humoyun91 @GabriFila @zzoman - I think I’ve finally resolved the issues with @react-querybuilder/material. Can you all try out the “material example” CodeSandbox link in PR #381? (This is the current link.)

Note: if you try it as-is, there will be a slight delay before the MUI components render in place of the default components. The new docs explain how to avoid this flash of non-MUI.

[jakeboone02]

Good news, everyone! I finally cracked the case of the missing theme configurations (see #324) and the issue will be resolved in v5.0, due out soon.