Проблема с темой Material-Ui для компонентов React, импортированных из библиотеки - PullRequest
Новая
       36

Проблема с темой Material-Ui для компонентов React, импортированных из библиотеки

0 голосов
/ 14 апреля 2020

У меня возникла проблема, и я искал в Google, чтобы найти ответ без шансов. Я создал библиотеку пользовательского интерфейса React / material с множеством компонентов, расширенных из Material UI. Эта библиотека принадлежит рабочей области пряжи вместе с основным приложением. Библиотека построена с использованием webpack и babel.

В основном приложении я импортирую эти компоненты и пытаюсь применить глобальную тему, созданную в основном приложении, используя ThemeProvider.

Это Кажется, работает как первый взгляд. Когда на странице один компонент lib, к нему применяется тема.

Но до тех пор, пока я добавляю еще один реагирующий компонент, который создается в основном приложении, а не загружается из библиотеки, компонент lib теряет тематику.

Я также продублировал код одного из компонентов lib внутри основного приложения (кнопка в следующем примере), чтобы проверить поведение. В этой ситуации, используя локальную кнопку, а не импортированную из библиотеки, тематика применяется хорошо.

Так что я что-то здесь упускаю. Почему тема «стерта» из компонентов, импортированных из моей пользовательской библиотеки реагирования / материала?

Я использую ovverides для настройки темы, как показано в приведенном ниже коде

На рисунке ниже видно вопрос. Когда кнопка одна, цвет темы применяется (красный)

При добавлении компонента AppBar красный цвет исчезает.

When theme is applied, the button is red

Компонент кнопки в библиотеке (упрощенная версия) 

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>

1 Ответ

0 голосов
/ 18 апреля 2020

Наконец, я нашел проблему, и я открою новый вопрос, чтобы понять, каков приоритет и / или порядок классов .Muixxx. В моем примере тема переопределяет backgroundColor классов .MuiButton-root

. При добавлении панели инструментов с меню гамбургера получается, что эта кнопка имеет класс по умолчанию .MuiButtonBase-root и прозрачный фоновый цвет.

Значит, это .MuiButtonBase-root переопределяет класс .MuiButton-root в моем компоненте "Button". Я хочу понять, почему.

...