Material-Ui theming issue with React components imported from a library

问题

I'm facing an issue, and I searched in Google to find answer with no chance. I have created a React / material Ui library, with a lot of components extended from Material UI. This library belongs to a yarn workspace, together with a main app. The library is built with webpack and babel.

In the main app, I'm importing these components and try to apply the global theme, created in the main app, using ThemeProvider.

It's seems to work as first sight. When the lib component is alone in the page, the theme is applied to it.

But as long as I add another react component, which is created in the main app and not download from the library, the lib component is losing the theming.

I have also duplicated the code of one of the lib component inside the main App (Button in the following example) to check the behavior. In this situation, using the local Button and not the imported one from the library, the theming is applied well.

So I miss something here. Why the theme is "erased" from components imported from my react/material ui library?

I'm using ovverides to configure the theme as shown in code below

Can see in picture below the issue. When the Button is alone, the theme color is appied (red)

When AppBar component is added, red color went away.

Button component in the library (simplified version)

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>
            );
    };

local component created in main app (with no styling at all)

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>
    );
};

Main app

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:

Finaly I found the issue and I will open a new question to understand what is the priority and/or order of the .Muixxx classes. In my example, the theme is overriding the backgroundColor of classes .MuiButton-root

When adding the AppBar with the hamburger menu, it turns out that this button comes with the default class .MuiButtonBase-root and a transparent backgroundcolor.

So it means that this .MuiButtonBase-root overrides the .MuiButton-root class in my "Button" component. I want to understand why.

来源：https://stackoverflow.com/questions/61201655/material-ui-theming-issue-with-react-components-imported-from-a-library

标签

reactjs

material-ui

overriding

theming