如何一次性消除React Material-UI中的DOMNesting警告？

临时屏蔽所有相关警告 #

如果你只是想快速屏蔽所有validateDOMNesting类警告，可以在项目入口文件（如index.js）中加入这段代码：

const originalConsoleError = console.error;
console.error = (...args) => {
  if (typeof args[0] === 'string' && args[0].includes('validateDOMNesting')) {
    return;
  }
  originalConsoleError.apply(console, args);
};

它会拦截控制台的错误输出，过滤掉包含validateDOMNesting的警告，不会影响其他正常错误信息展示。

长期规范解决方案 #

这类警告本质是提示你的DOM结构违反了HTML规范（比如示例里<table>嵌套在<p>内就是不合法的），临时屏蔽只是治标。建议从根源解决：

• 排查触发警告的组件，调整DOM层级，比如把包裹<table>的<p>换成<div>这类合适的容器标签
• 如果是第三方组件库导致的警告，检查组件库的正确使用方式，或者向库方反馈问题

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