如何使用Rollup打包MUI主题并解决组件库外部引用主题失效问题

你目前仅为styled-components提供了主题上下文，但原生MUI组件的内置样式（比如color="primary"属性对应的样式、MUI全局基础样式）依赖MUI自身的ThemeProvider读取主题，两个主题上下文不互通，所以会出现自定义的error样式正常、MUI原生配置不生效的问题。

分三部分调整即可解决：

1. 组件库侧调整 #

• 首先将你封装的MUI主题、两个主题Provider统一导出，也可以直接封装统一的组件根Provider内置主题：

// src/ComponentProvider.tsx
import React from 'react';
import { ThemeProvider as MuiThemeProvider } from '@material-ui/core/styles';
import { ThemeProvider as StyledThemeProvider } from 'styled-components';
import yourMuiTheme from './theme';

export const ComponentProvider = ({ children }) => {
  return (
    <MuiThemeProvider theme={yourMuiTheme}>
      <StyledThemeProvider theme={yourMuiTheme}>
        {children}
      </StyledThemeProvider>
    </MuiThemeProvider>
  )
}

• 在组件库入口src/index.ts中新增导出：

export * from './components';
export { ComponentProvider, MuiTheme, StyledThemeProvider } from './ComponentProvider';

2. 依赖与Rollup配置调整 #

你需要确认@material-ui/core、styled-components都被设为peer依赖，避免打包时把两份MUI/styled代码打入产物，导致多实例上下文隔离。

• 先检查package.json的peerDependencies配置：

{
  "peerDependencies": {
    "react": "^17.x || ^18.x",
    "react-dom": "^17.x || ^18.x",
    "@material-ui/core": "^4.x",
    "styled-components": "^5.x || ^6.x"
  }
}

• 你已经使用了peerDepsExternal插件，只要peerDependencies配置正确，Rollup不会把这些公共依赖打入产物，不会出现多实例冲突。

3. 业务接入侧调整 #

业务项目接入组件库时，在根组件外层包裹组件库导出的ComponentProvider即可：

import { ComponentProvider, Button } from '你的组件库名';

function App() {
  return (
    <ComponentProvider>
      {/* 内部所有组件都可以正常读取MUI主题配置 */}
      <Button color="primary">主色按钮</Button>
      <Button error>错误按钮</Button>
    </ComponentProvider>
  )
}

如果业务侧需要自定义主题，只需将自定义主题作为theme属性传给ComponentProvider即可。

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