从库导入的React组件的Material-Ui主题问题 [英] Material-Ui theming issue with React components imported from a library
问题描述
我遇到了一个问题，因此我在Google中搜索找不到答案的机会.我创建了一个React/material Ui库，其中包含从Material UI扩展的许多组件.该库与主应用程序一起属于纱线工作区.该库是使用webpack和babel构建的.
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.
在主应用程序中，我正在导入这些组件，并尝试使用ThemeProvider应用在主应用程序中创建的全局主题.
In the main app, I'm importing these components and try to apply the global theme, created in the main app, using ThemeProvider.
这似乎是一见钟情.当页面中仅包含lib组件时，将对其应用主题.
It's seems to work as first sight. When the lib component is alone in the page, the theme is applied to it.
但是，只要我添加另一个在主应用程序中创建而不是从库中下载的react组件，lib组件就会失去主题.
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.
我还复制了主应用程序内的lib组件之一的代码(在以下示例中为Button)，以检查行为.在这种情况下，使用本地Button而不是从库中导入按钮，可以很好地应用主题.
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.
所以我在这里想念一些东西.为什么主题从我的 react/material ui 库导入的组件中删除"了?
So I miss something here. Why the theme is "erased" from components imported from my react/material ui library?
我正在使用ovverides来配置主题，如下面的代码所示
I'm using ovverides to configure the theme as shown in code below
可以在问题下方的图片中看到.当单独使用Button时，将应用主题颜色(红色)
Can see in picture below the issue. When the Button is alone, the theme color is appied (red)
添加AppBar组件后，红色消失了.
When AppBar component is added, red color went away.
按钮组件(简化版)
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>
);
};
主应用
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>
推荐答案
最后，我找到了问题，我将打开一个新问题，以了解.Muixxx类的优先级和/或顺序是什么.在我的示例中，主题覆盖了 .MuiButton-root
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
在添加带有汉堡菜单的AppBar时，事实证明该按钮带有默认类 .MuiButtonBase-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.
所以这意味着这个 .MuiButtonBase-root 覆盖了我的Button"组件中的 .MuiButton-root 类.我想知道为什么.
So it means that this .MuiButtonBase-root overrides the .MuiButton-root class in my "Button" component.
I want to understand why.
这篇关于从库导入的React组件的Material-Ui主题问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
