从库导入的 React 组件的 Material-Ui 主题化问题答案

【问题标题】：Material-Ui theming issue with React components imported from a library从库导入的 React 组件的 Material-Ui 主题化问题
【发布时间】：2020-07-26 19:47:28
【问题描述】：

我遇到了一个问题，我在 Google 中搜索以找到答案，但没有任何机会。我创建了一个 React / Material Ui 库，其中包含许多从 Material UI 扩展而来的组件。该库与主应用程序一起属于纱线工作区。该库是使用 webpack 和 babel 构建的。

在主应用程序中，我正在导入这些组件并尝试应用在主应用程序中创建的全局主题，使用 ThemeProvider。

这似乎是一见钟情。当lib组件在页面中单独存在时，对其应用主题。

但只要我添加另一个反应组件，它是在主应用程序中创建的，而不是从库中下载的，lib 组件就会失去主题。

我还复制了主应用程序中的一个 lib 组件的代码（以下示例中的按钮）以检查行为。在这种情况下，使用本地 Button 而不是从库中导入的按钮，可以很好地应用主题。

所以我在这里想念一些东西。为什么从我的 react/material ui 库导入的组件中“删除”了主题？

我正在使用 ovverides 来配置主题，如下面的代码所示

可以在问题下方的图片中看到。当Button单独使用时，应用主题颜色（红色）

添加 AppBar 组件后，红色消失。

库中的按钮组件（简化版）

import { Button as MUIButton, ButtonProps } from "@material-ui/core";
import React from "react";

enum EButtonTypes {
    SUBMIT = "submit",
    RESET = "reset",
    BUTTON = "button",
    LINK = "button",
}

interface IButtonProps extends ButtonProps {
    type?: EButtonTypes;
}
const Button: React.FC<IButtonProps> = (props: IButtonProps): JSX.Element => {
            return (
                <MUIButton
                    {...props}
                    type={props.type ? props.type : EButtonTypes.BUTTON}
                >
                    {props.children}
                </MUIButton>
            );
    };

在主应用中创建的本地组件（完全没有样式）

const AppBar: React.FC<IAppBarProps> = (): JSX.Element => {
    return (
        <div>
            <MUIAppBar position="static">
                <Toolbar>
                    <IconButton edge="start" aria-label="open drawer">
                        <MenuIcon />
                    </IconButton>
                    <div>
                        <div>
                            <SearchIcon />
                        </div>
                        <InputBase
                            placeholder="Search…"
                            inputProps={{ "aria-label": "search" }}
                        />
                    </div>
                </Toolbar>
            </MUIAppBar>
        </div>
    );
};

主应用

const MUITheme: Theme = createMuiTheme({
    overrides: {
        MuiButton: {
            root: {
                font: "initial",
                fontFamily: globalThemeSettings.typography.fontFamily,
                fontWeight: globalThemeSettings.typography.fontWeight,
                padding: `${2 * globalThemeSettings.spacingInit}px ${
                    2 * globalThemeSettings.spacingInit
                }px`,
                backgroundColor: globalThemeSettings.buttons.backgroundColor,
                color: globalThemeSettings.colors.textColors.button.main,
                textTransform: "uppercase",
                "&:hover": {
                    backgroundColor:
                        globalThemeSettings.buttons.hover.backgroundColor,
                    transform: `scale(${globalThemeSettings.buttons.hover.transformScale})`,
                    transition: globalThemeSettings.buttons.hover.transition,
                },
            },
            outlined: {
                font: "initial",
                fontFamily: globalThemeSettings.typography.fontFamily,
                fontWeight: globalThemeSettings.typography.fontWeight,
                padding: `${globalThemeSettings.spacingInit}px ${
                    2 * globalThemeSettings.spacingInit
                }px`,
                borderColor: globalThemeSettings.buttons.backgroundColor,
                borderWidth: 3,
                color: globalThemeSettings.buttons.backgroundColor,
                backgroundColor:
                    globalThemeSettings.colors.textColors.button.main,
            },
            text: {
                font: "initial",
                fontFamily: globalThemeSettings.typography.fontFamily,
                fontWeight: globalThemeSettings.typography.fontWeight,
                padding: `${globalThemeSettings.spacingInit}px ${
                    2 * globalThemeSettings.spacingInit
                }px`,
            },
        },
    });

<StylesProvider injectFirst>
        <CssBaseline />
        <ThemeProvider theme={MUITheme}>

               <AppBar/>   <------ if no AppBar component, the Button has the theme
               <Button>I'm losing my theme when AppBar is rendered!!</Button>


        </MUIThemeProvider>
</StylesProvider>

【问题讨论】：

有什么帮助吗？仍然卡住

标签： reactjs material-ui overriding theming

【解决方案1】：

找到解决办法

即使从 yarn 工作区加载，当有多个 @material-ui/core 副本时也会出现问题。原因是，它在库中被标记为开发依赖而不是对等依赖。一旦它被标记为对等依赖项，就只加载一个副本，这样就可以正常工作了。

请找到test code 使用建议的解决方案

【讨论】：

【解决方案2】：

最后我发现了这个问题，我将打开一个新问题来了解 .Muixxx 类的优先级和/或顺序是什么。在我的示例中，主题覆盖了类的 backgroundColor .MuiButton-root

在添加带有汉堡菜单的AppBar时，原来这个按钮带有默认类.MuiButtonBase-root和透明背景色。

所以这意味着这个.MuiButtonBase-root 覆盖了我的“按钮”组件中的.MuiButton-root 类。我想知道为什么。

【讨论】：