使用styled-components时@mui/system Grid组件--Grid-columns未定义求助

问题分析 #

核心问题是MUI Grid v2依赖的--Grid-columns等CSS变量未被注入DOM，导致网格元素无法按预期布局、全部占满视口。这是因为使用styled-components作为样式引擎时，普通的ThemeProvider不会自动处理Grid v2所需的CSS变量注入逻辑。

解决步骤 #

1. 替换ThemeProvider为CssVarsProvider #

Grid v2的CSS变量需要通过CssVarsProvider注入，替换原ThemeProvider即可解决变量未定义问题。

2. 修正webpack别名配置 #

你的webpack配置使用了旧版MUI的@material-ui/styled-engine别名，新版MUI（v5）已改用@mui前缀，需修正别名确保样式引擎正确替换。

3. 显式指定Grid主题配置（可选，更稳妥） #

在createTheme时显式指定Grid列数，确保CSS变量生成的准确性。

修改后的代码示例 #

组件代码 #

import Grid from '@mui/system/Unstable_Grid';
import { CssVarsProvider, createTheme } from '@mui/system';

const Root = () => {
  const { useSelectedFlightState } = store;
  const theme = createTheme({
    grid: {
      columns: 12, // 显式设置网格列数，默认值为12，显式配置避免意外
    },
  });

  return (
   <CssVarsProvider theme={theme}>
     <Grid container spacing={2} xs={12} sm={10} smOffset={1}>
       <Grid xs={12} sm={8}>
        ....
       </Grid>
       <Grid xs={12} sm={4}>
       ....
       </Grid>
     </Grid>
   </CssVarsProvider>
  );
};

export default Root;

webpack.config.js 别名修正 #

...
resolve: {
  alias: {
    '@mui/styled-engine': '@mui/styled-engine-sc', // 替换为新版@mui前缀的别名
  },
},
...

原因说明 #

• MUI Grid v2（Unstable_Grid）采用CSS变量实现动态布局，这些变量需要CssVarsProvider注入到根DOM节点中；
• 普通ThemeProvider仅负责主题传递，不处理CSS变量的生成与注入，使用styled-components作为样式引擎时，这个差异会直接导致Grid布局失效；
• 旧版@material-ui的别名在MUI v5中已不再适用，必须改用@mui前缀的别名，确保styled-components能正确作为MUI的样式引擎。

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