如何解决从@material-ui/core导入Stack组件提示无导出成员的问题

问题原因 #

你遇到的报错是Material UI版本不匹配导致的：

• Stack组件是Material UI v5版本才新增的布局组件，你当前使用的是v4版本的@material-ui/core依赖包，该版本包内没有Stack的导出，所以会触发对应报错。

解决方法 #

可根据项目需求选择以下两种方案：

方案1：升级到Material UI v5 #

v5版本是Material UI的当前主流版本，包名已统一调整为@mui开头，安装对应依赖后使用如下导入语句即可正常使用Stack：

import { Accordion, AccordionDetails, Stack, Grid, Typography } from '@mui/material';

注意：v5相对于v4存在部分破坏性变更，升级后需要同步调整项目中其他Material UI组件的API用法。

方案2：v4版本下使用替代实现 #

如果暂时不需要升级，可使用v4已有的组件实现和Stack完全一致的效果：
Stack本质是封装了flex布局的容器组件，默认垂直排列，支持直接设置子元素间距，你可以用Box组件自定义样式实现：

import { Box } from '@material-ui/core';

// 实现垂直排列、子元素间距16px的Stack效果
<Box sx={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
  {/* 这里放子元素 */}
</Box>

// 实现水平排列、子元素间距16px的Stack效果
<Box sx={{ display: 'flex', flexDirection: 'row', gap: '16px' }}>
  {/* 这里放子元素 */}
</Box>

也可以直接使用Grid组件的container属性搭配spacing参数实现相同的布局效果。

内容的提问来源于stack exchange，提问作者Pierre-Luc Maltais