Material-UI提示css函数弃用警告，未使用Box组件触发问题求助

算力阿峰

2026-10-7

警告触发原因

该警告和你代码中从styled-components导入的css方法完全无关，警告抛出的来源是@material-ui/system包下的同名废弃css方法，两者没有关联。
你确实没有直接使用Box组件，但你所安装的@material-ui/core 4.11.4版本中，大量内置组件内部依赖了Box模块，只要你的代码导入了任意一个这类内置组件，Box模块在加载时就会自动执行内部对@material-ui/system的css方法的调用，进而触发警告。
根本诱因是你安装的MUI子包版本不匹配：@material-ui/core停留在4.11.4，但@material-ui/system升级到了4.12.1，这个版本的system包新增了该css方法的废弃提示，但低版本的core包没有适配调整Box的实现，因此出现版本兼容导致的误报。

解决方案

方案1（最推荐，根治问题）

统一所有@material-ui开头依赖的版本到同一4.x版本，比如将@material-ui/system从4.12.1降级到和core一致的4.11.4即可，该版本的system包还未添加该废弃警告，不存在版本兼容问题，修改依赖版本后重新安装依赖即可消除警告。

方案2（临时屏蔽，不影响业务）

如果不方便调整依赖版本，可以在单元测试配置中添加警告过滤规则，以Jest为例，在测试全局配置文件中添加如下代码即可过滤该特定警告：

const originalWarn = console.warn.bind(console.warn);
console.warn = (msg, ...args) => {
  if (msg.includes('Material-UI: The `css` function is deprecated. Use the `styleFunctionSx` instead.')) return;
  originalWarn(msg, ...args);
};

该警告属于版本不兼容导致的良性提示，不会影响组件功能正常运行。