在共享库中使用 MUI 的组件不使用父应用程序主题

Question

我有两个使用 MUI 的应用程序，每个应用程序都有一个主题。我有一个单独的 npm 包，其中包含两个应用程序使用的组件。这工作正常，除了当我从 npm 包导入组件时，它不使用使用它的应用程序的主题，它似乎只使用默认主题（因为单独的包没有定义主题）。有没有办法确保从我的 npm 包导入的共享组件使用消费应用程序的主题？

谢谢！

Answer 1

我正在通过使用 @mui/material 中的

useTheme()

钩子并将 @mui/material （和 @mui/system）作为我的库组件中的主题来完成这项工作（实际上我正在解决它，但没关系）库的对等依赖关系，以确保它与使用该库的应用程序使用相同的内容。

在

sx

中，此语法是一个选项（我发现有必要将颜色显式添加到我的库的某些组件中以使深色主题支持起作用）：

sx={[(theme) => ({
    color: theme.palette.text.primary,
})]}