MUI Stack组件hover时如何同时修改Item及间距区域背景色？

问题核心是Stack的spacing基于元素margin实现，而margin属于元素外部空间无法设置背景，因此直接给Item加hover样式无法覆盖间距区域。以下是可行的实现方式：

实现思路 #

放弃Stack的内置spacing，将每个Item与其下方的Divider、间距区域包裹在一个父容器中，用容器的padding替代Stack的spacing。父容器的hover样式会覆盖整个容器内部（包括Item、Divider和padding间距），从而实现同步变色效果。

完整代码示例 #

import { Box, Divider, Typography } from '@mui/material';

export default function HoverableItemStack() {
  const itemList = ['用户列表', '订单管理', '系统设置'];

  return (
    <Box sx={{ width: '300px', border: '1px solid #eee', borderRadius: '4px' }}>
      {itemList.map((item, idx) => (
        <Box
          key={idx}
          sx={{
            // 用paddingBottom模拟原Stack的spacing={4}，最后一个Item去掉底部间距
            paddingBottom: idx !== itemList.length - 1 ? 4 : 0,
            transition: 'background-color 0.2s ease',
            '&:hover': {
              backgroundColor: '#f0f7ff',
              // hover时同步改变Divider颜色
              '& .MuiDivider-root': {
                backgroundColor: '#1890ff',
              },
            },
          }}
        >
          {/* 内部Item容器，可自定义内边距 */}
          <Box sx={{ padding: 2, cursor: 'pointer' }}>
            <Typography variant="body1">{item}</Typography>
          </Box>
          {/* 最后一个Item不显示Divider */}
          {idx !== itemList.length - 1 && (
            <Divider sx={{ margin: 0 }} />
          )}
        </Box>
      ))}
    </Box>
  );
}

效果说明 #

• 鼠标悬停任意Item时，Item自身、下方Divider以及两者之间的间距区域会同步变为设置的背景色
• 加入过渡动画让颜色变化更平滑
• 可根据需求调整背景色、Divider颜色、间距大小等样式

补充说明 #

如果仍想保留Stack组件，可以将每个Item+Divider的组合作为Stack的子元素，同时给每个子元素外层套Box并设置padding，核心逻辑与上述方案一致，本质都是将可设置背景的容器替代无法设置背景的margin间距。

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