Material-UI 主题在共享组件中不起作用

Question

我正在使用 Material-ui 构建一个可重用的共享组件库，该库正在我的主应用程序中导入，如下所示：

import { theme, StepperComponent } from '@company/shared-components';
import { ThemeProvider } from '@mui/material/styles';

...

return (
  <ThemeProvider theme={theme}>
     <StepperComponent steps={stepperTitles} />
     ...
)

步进器组件位于我的共享组件存储库中npm-linking

import React from 'react';
import Step from '@mui/material/Step';
import StepLabel from '@mui/material/StepLabel';
import { StyledStepper, StyledStepConnector, StyledStepIcon } from './Stepper.styles';

const StepperComponent = ({ steps, ...props }) => {
  return (
    <StyledStepper {...props} connector={<StyledStepConnector />} alternativeLabel>

但是，由于某种原因，即使我将其包装在主题提供程序中，主题也没有应用到该组件。当我注销主题时，它不包含导入到我的主应用程序的主题中的颜色。

有谁知道为什么会发生这种情况？

Answer 1

我正在处理类似的问题，但还没有完全解决它，但我有一种强烈的感觉，它涉及在material-ui和emotion/react内部创建多个React上下文。

唯一ThemeProvider将主题公开给有权访问其上下文的组件 - 主应用程序中的组件。

通过确保 Material-ui 的 ThemeProvider 及其上下文位于共享组件库而不是主应用程序中，我能够实现所需的行为。我通过从组件库导出 ThemeProvider 的简单包装来做到这一点；从字面上看只是：

interface LibraryThemeProviderProps {
  children?: React.ReactNode;
  theme: Theme;
}

const LibraryThemeProvider: React.FC<LibraryThemeProviderProps> = ({ children, theme }) => (
  <ThemeProvider theme={theme}>
    {children}
  </ThemeProvider>
)

然后用于代替主要应用中的LibraryThemeProvider材料。ThemeProvider

如果您希望在主应用程序中应用相同的主题，您只需将原始主题ThemeProvider与新主题一起保留在适当的位置即可LibraryThemeProvider。

我更愿意用一个解决这个问题，ThemeProvider但还无法解决：/

注意：我useTheme在所有组件中使用钩子来访问主题。useTheme如果没有看到 ThemeProvider 上下文提供的主题，将使用材质的默认主题 - 所有这一切都发生在幕后。