MUI Datatables 3.7.8版本出现buttonRef废弃警告如何处理

对应警告内容：index.js:1 Warning: Failed prop type: The prop buttonRef of ForwardRef(ButtonBase) is deprecated. Use ref instead

问题共性说明 #

该问题是V3.7.8版本的通用已知缺陷，大量使用该版本的开发者都遇到过同类问题。问题根因是该版本内部封装搜索入口的Tooltip组件时，仍在向底层ButtonBase传递已被MUI核心库废弃的buttonRef属性，未适配官方要求的ref替代方案。开启搜索功能时对应组件会被渲染，触发prop类型校验警告；关闭搜索功能后相关组件不加载，警告自动消失。

可用修复方案 #

• 临时屏蔽方案：仅过滤该特定警告，不修改底层逻辑，适合暂时无法升级版本的项目，在项目入口文件加入如下代码：

const originError = console.error;
console.error = function(...args) {
  if (args[0]?.includes('The prop `buttonRef` of `ForwardRef(ButtonBase)` is deprecated')) {
    return;
  }
  originError.apply(console, args);
};

• 自定义组件替代方案：通过MUIDataTable的配置项自定义搜索渲染逻辑，绕过内部有缺陷的默认实现，配置示例如下：

const tableOptions = {
  search: true,
  customSearchRender: (searchVal, onSearch, closeSearch, opts) => (
    <input
      type="search"
      value={searchVal}
      onChange={(e) => onSearch(e.target.value)}
      placeholder="搜索内容"
      style={{ padding: '4px 8px', borderRadius: 4, border: '1px solid #eee' }}
    />
  )
}

• 官方修复方案：升级MUI Datatables到V3.8.0及以上版本，该版本官方已将内部所有buttonRef调用替换为合规的ref属性，升级后无需修改业务代码即可彻底消除该警告。升级前请确认新版本与项目当前使用的MUI核心库版本兼容，避免出现其他适配问题。

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