如何单独提取MUI的TablePagination组件无需安装完整MUI？

可以尝试，但直接从node_modules复制文件大概率会报错——MUI的组件并非完全独立，TablePagination依赖大量内部模块、主题系统和基础组件，脱离完整的MUI生态很难正常运行。

为什么直接复制文件会报错？ #

• TablePagination依赖MUI内部的工具函数（比如@mui/material/utils）、主题上下文（ThemeContext）、样式系统（Emotion），甚至还会用到IconButton、Select这类基础组件，这些依赖没同步复制的话，运行时会直接抛出"模块找不到"的错误。
• 组件代码里大量使用MUI的主题变量、样式钩子，脱离MUI的主题系统后，样式会完全失效，甚至组件逻辑都跑不起来。

可行的解决办法 #

• 用Tree Shaking减小打包体积（最推荐）
  不用单独提取，直接安装完整的@mui/material，但只导入TablePagination。现代打包工具（Webpack、Vite）会自动做tree shaking，把没用的MUI代码剔除，最终打包体积并不会太大。
  安装命令：

  npm install @mui/material @emotion/react @emotion/styled
  

  导入使用：

  import TablePagination from '@mui/material/TablePagination';
  

• 手动剥离依赖（不推荐）
  如果一定要完全脱离MUI包，得做大量改造：

  • 从MUI官方仓库拉取对应版本的TablePagination源码，复制到项目中
  • 逐个替换内部依赖：比如把useTheme换成自己实现的简易主题钩子，把用到的IconButton、Select等组件换成自定义实现，或者单独提取这些基础组件的源码
  • 把MUI的styled样式转换成项目用的CSS方案（比如原生CSS、CSS Modules）
    这个过程繁琐且容易出bug，后续MUI版本更新也无法同步维护。

• 改用轻量独立组件
  要是不想和MUI有任何关联，可以找功能类似的轻量分页组件，比如react-table的分页模块，或者其他独立的React分页组件，体积更小且无多余依赖。

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