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

问题描述

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

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

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

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

我还复制了主应用程序（下例中的按钮）中的一个 lib 组件的代码来检查行为。在这种情况下，使用本地 Button 而不是从库中导入的 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>

标签： reactjsmaterial-uioverridingtheming

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

问题描述

解决方案

推荐阅读