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

Posted 2023-02-19

【中文标题】从库导入的 React 组件的 Material-Ui 主题化问题

【英文标题】：Material-Ui theming issue with React components imported from a library

【发布时间】：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.spacingInitpx $
                    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.spacingInitpx $
                    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.spacingInitpx $
                    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>

【问题讨论】：

有什么帮助吗？仍然卡住

【参考方案1】：

找到解决办法

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

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

【参考方案2】：

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

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

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