React项目构建失败：找不到@mui/system的experimental_sx导出如何修复？

报错信息 #

$ yarn build:remote
yarn run
$ CI=false react-scripts build
Creating an optimized production build...
Failed to compile.
export 'experimental_sx' (reexported as 'experimental_sx') was not found in '@mui/system' (possible exports: Box, Container, GlobalStyles, Stack, StyledEngineProvider, ThemeProvider, Unstable_Grid, alignContent, alignItems, alignSelf, alpha, backgroundColor, bgcolor, border, borderBottom, borderBottomColor, borderColor, borderLeft, borderLeftColor, borderRadius, borderRight, borderRightColor, borderTop, borderTopColor, borderTransform, borders, bottom, boxSizing, breakpoints, color, colorChannel, columnGap, compose, containerClasses, createBox, createBreakpoints, createContainer, createGrid, createSpacing, createStack, createStyled, createTheme, createUnarySpacing, createUnaryUnit, css, darken, decomposeColor, display, emphasize, flex, flexBasis, flexDirection, flexGrow, flexShrink, flexWrap, flexbox, fontFamily, fontSize, fontStyle, fontWeight, gap, getContainerUtilityClass, getContrastRatio, getGridUtilityClass, getLuminance, getPath, getStackUtilityClass, getStyleFromPropValue, getStyleValue, getThemeProps, getValue, grid, gridArea, gridAutoColumns, gridAutoFlow, gridAutoRows, gridClasses, gridColumn, gridRow, gridTemplateAreas, gridTemplateColumns, gridTemplateRows, handleBreakpoints, height, hexToRgb, hslToRgb, justifyContent, justifyItems, justifySelf, keyframes, left, letterSpacing, lighten, lineHeight, margin, marginKeys, maxHeight, maxWidth, mergeBreakpointsInOrder, minHeight, minWidth, order, padding, paddingKeys, palette, paletteTransform, position, positions, private_safeAlpha, private_safeColorChannel, private_safeDarken, private_safeEmphasize, private_safeLighten, recomposeColor, responsivePropType, rgbToHex, right, rowGap, shadows, shape, shouldForwardProp, sizeHeight, sizeWidth, sizing, sizingTransform, spacing, stackClasses, style, styled, systemDefaultTheme, textAlign, textTransform, top, typography, typographyVariant, unstable_createCssVarsProvider, unstable_createGetCssVar, unstable_createStyleFunctionSx, unstable_defaultSxConfig, unstable_extendSxProp, unstable_getThemeValue, unstable_resolveBreakpointValues, unstable_styleFunctionSx, useTheme, useThemeProps, useThemeWithoutDefault, width, zIndex)
error Command failed with exit code 1.

修复方法 #

• 替换废弃API：MUI版本迭代后，experimental_sx已被重命名为unstable_styleFunctionSx（若涉及创建逻辑则用unstable_createStyleFunctionSx）。找到项目中所有导入或使用experimental_sx的代码，替换为对应新API。示例：

  // 原代码
  import { experimental_sx } from '@mui/system';
  // 修改后
  import { unstable_styleFunctionSx } from '@mui/system';
  

• 统一MUI依赖版本：确保@mui/material、@mui/system等所有MUI相关包版本一致，避免版本不兼容导致导出差异。可删除node_modules和yarn.lock（或package-lock.json），重新执行yarn install或npm install同步版本。
• 排查第三方依赖兼容性：若报错由项目依赖的第三方库引入experimental_sx导致，需升级该第三方库至适配当前MUI版本的版本，或降级MUI至第三方库支持的版本。

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