Material-UI 主题：如何管理 .MuiXXX 类的应用顺序或优先级？

Question

[4月19日编辑]

我创建了一个CODESANDBOX来显示问题，当然，这不会发生在沙箱中。 此代码与我的代码之间的唯一区别是，我在 SANDBOX 示例中复制了 Button 组件的代码，而在我的应用程序中，Button 组件是从库（与应用程序属于同一纱线工作区）导入的。该库是使用 webpack 和 babel 构建的，不包括 React 和 Material-UI

externals: {
    react: "react",
    "react-dom": "react-dom",
    "react-router": "react-router",
    "react-router-dom": "react-router-dom",
    "@material-ui/core": "@material-ui/core",
    "@material-ui/icons": "@material-ui/icons",
    "@material-ui/lab": "@material-ui/lab",
    "@material-ui/styles": "@material-ui/styles",
    formik: "formik",
},

检查浏览器中的组件显示了沙箱和我的应用程序之间的样式差异：

在两侧，类以相同的方式应用于组件：

在沙箱中

在我的应用程序中

但在 sandBox 上，MuiButtonBase-root background-color被覆盖MuiButton-root background-color

而我的应用程序中恰恰相反。似乎MuiButton-root backGroundColor被覆盖了MuiButtonBase-root background-color

但是，如果我通过仅导入 并重新导出它而不更改任何内容（仅传递请求组件的特定道具）来RecreatedButton在应用程序中创建一个组件，则样式将正确应用，如沙箱示例中所示。Button component of my UI Library

这对我来说有点奇怪......

为什么会有这样的行为？

只需按组件导入和重新导出

   import {
        Button as LibraryButton,
        EButtonTypes,
        IButtonProps,
    } from "@mylibrairy/reactcomponentscommon";  <---- importing the button
    import React from "react";

const RecreatedButton: React.FC<IButtonProps> = (
    props: IButtonProps
): JSX.Element => {
    return (
        <LibraryButton type={EButtonTypes.BUTTON}>
            {props.children}
        </LibraryButton>
    );
};

export { RecreatedButton };

在 app.ts 中使用两者。一个有主题，另一个没有

    import { ThemeProvider } from "@material-ui/core/styles";
    import {
        Button as LibraryButton,
        EButtonTypes,
        IButtonProps,
    } from "@mylibrairy/reactcomponentscommon"
    import React from "react";
    import AppBar from "../../UIComponents/AppBar";
    import { RecreatedButton } from "../../UIComponents/Button";
    import { MUITheme } from "./../../Theming/defaultTheme";

    export const MainApp: React.FC = (): JSX.Element => {
        return (
            <ThemeProvider theme={MUITheme}>
                <>
                    <AppBar />
                    <LibraryButton type={EButtonTypes.BUTTON}> I'm the library component, directly used as is, and background color is NOT CORRECT ></LibraryButton>
                    <RecreatedButton>
                        I'm recreated button, just rexporting the library component, and the backgroundcolor is correct !?!?{" "}
                    </RecreatedButton>
                </>
            </ThemeProvider>
        );
    };

Answer 1

您可以尝试覆盖默认全局变量MuiButtonBase

\n\n

\n\n

const theme = createMuiTheme({\n  props: {\n    // Name of the component \xe2\x9a\x9b\xef\xb8\x8f\n    MuiButtonBase: {\n      // The default props to change\n      root:{\n        backgroundColor: \'red\' \n      }\n    },\n  },\n});\n\nfunction DefaultProps() {\n  return (\n    <ThemeProvider theme={theme}>\n      <Button>Change default props</Button>\n    </ThemeProvider>\n  );\n}\n

\n\n

此处工作沙箱 - https://codesandbox.io/s/override-button-base-7qwd5

\n