求助：共享库中的MUI组件如何使用父应用主题？

要让共享npm包中的组件使用消费应用的MUI主题，核心是利用MUI的主题上下文传递机制，确保共享组件能正确消费应用顶层的ThemeProvider提供的主题。以下是具体解决步骤：

1. 移除共享组件内部的ThemeProvider #

检查共享包的组件代码，绝对不要在组件内部嵌套自己的ThemeProvider——这会强制组件使用内部的默认主题，覆盖消费应用的主题配置。

错误示例：

// 共享组件中错误的写法
import { ThemeProvider, createTheme } from '@mui/material/styles';
import { Button } from '@mui/material';

const defaultTheme = createTheme();
export default function SharedButton() {
  return (
    <ThemeProvider theme={defaultTheme}>
      <Button>共享按钮</Button>
    </ThemeProvider>
  );
}

正确写法：

// 共享组件中正确的写法
import { Button } from '@mui/material';

export default function SharedButton() {
  return <Button>共享按钮</Button>;
}

2. 配置共享包的peerDependencies #

确保共享包不打包MUI相关依赖，而是依赖消费应用提供的MUI版本，这样共享组件会和应用使用同一套MUI上下文，主题才能正常传递。

在共享包的package.json中添加如下配置：

"peerDependencies": {
  "@mui/material": "^5.0.0",
  "@mui/styles": "^5.0.0",
  "react": "^17.0.0 || ^18.0.0",
  "react-dom": "^17.0.0 || ^18.0.0"
},
"devDependencies": {
  "@mui/material": "^5.0.0",
  "@mui/styles": "^5.0.0",
  "react": "^18.0.0",
  "react-dom": "^18.0.0"
}

同时，在打包工具（如Rollup、Webpack）中配置external，将上述依赖排除在打包产物外，避免重复打包。

3. 确保消费应用的ThemeProvider覆盖全局 #

消费应用必须将自定义主题的ThemeProvider放在应用的最顶层，确保所有组件（包括导入的共享组件）都处于主题上下文范围内。

示例：

// 消费应用的入口文件
import { ThemeProvider, createTheme } from '@mui/material/styles';
import SharedButton from 'your-shared-package-name';

// 应用自定义主题
const appTheme = createTheme({
  palette: {
    primary: {
      main: '#2e7d32',
    },
    secondary: {
      main: '#ff5722',
    },
  },
});

function App() {
  return (
    <ThemeProvider theme={appTheme}>
      <div className="App">
        <h1>消费应用</h1>
        <SharedButton /> {/* 此组件会自动使用appTheme */}
      </div>
    </ThemeProvider>
  );
}

export default App;

4. 按需使用useTheme钩子获取主题（可选） #

如果共享组件需要直接使用主题变量做自定义逻辑，可以通过MUI的useTheme钩子获取消费应用的主题：

// 共享组件中使用主题变量
import { useTheme } from '@mui/material/styles';
import { Typography } from '@mui/material';

export default function ThemedText() {
  const theme = useTheme();
  return (
    <Typography style={{ color: theme.palette.primary.main }}>
      跟随应用主题的文本
    </Typography>
  );
}

内容的提问来源于stack exchange，提问作者Chuckatron