Material UI v5自定义库组件主题未生效问题求助

一、组件库导入后主题不生效 #

问题根源 #

组件库打包时把Material UI、Styled Components这类依赖也打包进去了，导致库和应用用的不是同一个依赖实例，Theme Context传不过去。

解决办法 #

• 修改组件库的package.json，把@mui/material、@mui/styles、styled-components移到peerDependencies里，让组件库复用应用的这些依赖：

  {
    "peerDependencies": {
      "@mui/material": "^5.0.0",
      "@mui/styles": "^5.0.0",
      "styled-components": "^5.0.0",
      "react": "^18.0.0",
      "react-dom": "^18.0.0"
    },
    "devDependencies": {
      // 保留这些依赖作为开发用，避免开发时报错
      "@mui/material": "^5.0.0",
      // 其他devDeps...
    }
  }
  

• 配置构建工具不打包这些依赖：
  如果用Webpack，在webpack.config.js加externals：

  module.exports = {
    // ...其他配置
    externals: {
      react: 'react',
      'react-dom': 'react-dom',
      '@mui/material': '@mui/material',
      '@mui/styles': '@mui/styles',
      'styled-components': 'styled-components'
    }
  }
  

  用Rollup的话，在配置里加external数组：

  export default {
    // ...其他配置
    external: ['react', 'react-dom', '@mui/material', '@mui/styles', 'styled-components']
  }
  

• 检查组件代码，确保库组件里没硬写主题值，都是通过useTheme或者Styled Components的主题上下文获取样式。

二、开发构建后浏览器看不到源码映射 #

问题根源 #

组件库的开发构建没开启sourcemap生成，或者devtool配置不正确。

解决办法 #

• 调整Webpack的devtool配置，在开发环境的Webpack配置里，把devtool设为eval-source-map（开发时编译更快）或者source-map（映射更完整）：

  module.exports = {
    mode: 'development',
    devtool: 'eval-source-map',
    // ...其他配置
  }
  

• 确认构建生成了sourcemap文件：跑yarn build:dev后，去输出目录查看是否有.map后缀的文件，同时主JS文件末尾要有//# sourceMappingURL=xxx.map的注释。
• 应用端无需额外配置，一般React应用的开发默认配置已支持加载sourcemap文件。

复现步骤 #

git clone https://github.com/Findeton/mui-app.git
git submodule update --init
cd mui-lib && yarn && yarn build:dev && cd ..
yarn
yarn start

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