Material-UI 主题化组件库

Posted 2023-04-14

【中文标题】Material-UI 主题化组件库

【英文标题】：Material-UI theme-able component library

【发布时间】：2021-05-23 10:08:42

【问题描述】：

我们有一个 Material-UI 组件库，我们正试图通过“父”应用程序使其主题化。

例如：

Parent app:
<ThemeProvider theme=theme>
   <ExternalComponent/>
</ThemeProvider>

Component library:
const useStyles = makeStyles(theme => (
    root: 
        backgroundColor: theme.palette.neutral.dark,
    
));

const ExternalComponent = ( children ) => 
    const classes = useStyles();

    return (
        <div className=classes.root>
            <div>
                <Menu />
            </div>
            <div className=classes.headerColumn>
                <Header />
                <Content>
                     children 
                </Content>
            </div>
        </div>
)

useStyles 函数中的“ExternalComponent”失败，因为theme.palette.neutral.dark 不存在。

编辑： 只是为了澄清 ExternalComponent 在一个单独的包中。因此，它与“父应用”完全分开构建。

【问题讨论】：

请同时添加您的主题文件..

@Rajiv 不相关。

是的。在makeStyles 中，您尝试访问theme.palette.neutral.dark 颜色，这在material-ui 中默认不是。我想这可能是原因..

你是对的，它在主题文件中的自定义主题中。它在应用程序内部工作，而不是在库中。

【参考方案1】：

您可以使用 Material-UI useTheme() 挂钩吗？

useTheme

它应该让您可以访问组件内部的主题。

【讨论】：

不幸的是 useTheme 只能获取默认主题...

【参考方案2】：

这是我目前的解决方法。我不是一个超级粉丝，但它很实用......

Parent app:

<ThemeProvider theme=theme>
   <ExternalComponent theme=theme/>
</ThemeProvider>

Component library:
const useStyles = theme => makeStyles((
    root: 
        backgroundColor: theme.palette.neutral.dark,
    
));

Component: 

const ExternalComponent = ( theme, children ) => 
    const classes = useStyles(theme);

    return (
        <div className=classes.root>
            <div>
                <Menu />
            </div>
            <div className=classes.headerColumn>
                <Header />
                <Content>
                     children 
                </Content>
            </div>
        </div>
)

【讨论】：

从那时起在这一点上的任何新事物，我都陷入了同样的问题