• • react-awesome-query-builder**是在材质v4上创建的，它会与MUI v5发生样式冲突，我使用的是MUI v5，当我删除MaterialConfig时，一切都运行得很好。

先谢谢你。
如何将react-awesome-query-builder与MUI v5一起使用？

import React, { useState } from "react";
import { Query, Builder, Utils as QbUtils } from "react-awesome-query-builder";
import MaterialConfig from "react-awesome-query-builder/lib/config/material";
import "react-awesome-query-builder/lib/css/styles.css";
import "react-awesome-query-builder/lib/css/compact_styles.css";
import PublicTitle from "publicComponent/publicTitle";
import {Box} from "@mui/material"; //optional, for more compact styles

const InitialConfig = MaterialConfig; // or MaterialConfig or BasicConfig


// You can load query value from your backend storage (for saving see `Query.onChange()`)
const queryValue = { id: QbUtils.uuid(), type: "group" };

 const QueryBuild = () => {
    const [state, setState] = useState({
        tree: QbUtils.checkTree(QbUtils.loadTree(queryValue), config),
        config: config
    });

  
    return (
        <div>
            <PublicTitle title="Query Building"/>
            <div className="query-builder-result mb-3 mt-4">

            <Box className="group group-or-rule p-3">
                <p>
                    Result:
                </p>

                <pre style={{fontSize:"1rem"}}>
            {JSON.stringify(QbUtils.queryString(state.tree, state.config))}
          </pre>
            </Box>

        </div>
            <Query
                {...config}
                value={state.tree}
                onChange={onChange}
                renderBuilder={renderBuilder}
                style={{padding: "0"}}
            />

        </div>
    );
};
export default QueryBuild;