react-awesome-query-builder 和 MUI v5 之间存在冲突答案

【问题标题】：there are conflict between react-awesome-query-builder and MUI v5react-awesome-query-builder 和 MUI v5 之间存在冲突
【发布时间】：2021-11-29 14:00:53
【问题描述】：

react-awesome-query-builder 在材料 v4 上制作，它与 MUI v5 的样式冲突我正在使用 MUI v5，当我删除 MaterialConfig 时，一切正常。

提前谢谢你。

如何在 MUI v5 中使用 react-awesome-query-builder？

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;

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

最后，我用了

import MaterialConfig from "react-awesome-query-builder-pd/lib/config/material";

解决我的问题

【讨论】：

【解决方案2】：

在我自己的情况下，我不得不使用

import MuiConfig from 'react-awesome-query-builder/lib/config/mui';

以及配置中的主题：

theme: {
  mui: theme(myThemeColors)
}

【讨论】：