Material-UI Collapse组件水平折叠功能未按预期生效问题排查

你遇到的问题其实是Material-UI v4版本中Collapse组件的一个已知限制：虽然组件源码里声明了支持orientation="horizontal"，但实际上这个版本并没有提供对应的collapsedWidth属性来控制水平折叠后的宽度，所以即使设置了orientation，组件依然只会按照垂直方向的逻辑（基于collapsedHeight）来处理折叠动画。

解决方案 #

针对v4版本，有两种可行的处理方式：

1. 手动控制宽度结合Collapse动画

我们可以通过动态设置内容容器的宽度，配合Collapse组件的动画效果来模拟水平折叠。具体步骤如下：

• 移除无效的collapsedHeight属性，因为它只作用于垂直折叠
• 给内容容器添加动态宽度样式，根据collapsed状态切换宽度（折叠时设为一个最小宽度，比如仅容纳按钮的宽度，或者0）
• 确保容器设置overflow: hidden，避免折叠时内容溢出

修改后的代码示例：

import React from 'react';
import { Collapse, IconButton } from '@material-ui/core';
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';

function CollapsePanel(props) { 
  const [collapsed, setCollapse] = React.useState(true);
  
  // 动态计算容器宽度：折叠时只留按钮宽度，展开时用预设的最小宽度
  const panelWidth = collapsed ? '48px' : '180px';

  return ( 
    <Collapse in={!collapsed} orientation={'horizontal'}>
      <div style={{
        border:'5px solid blue', 
        display:"flex",
        flexDirection: "column", 
        alignItems:"stretch", 
        width: panelWidth,
        overflow: 'hidden',
        height:'calc(100vh - 40px)',
        transition: 'width 300ms ease' // 保持和Collapse默认动画时长一致
      }} >
        <IconButton onClick={()=>setCollapse(!collapsed)}>
          <ChevronLeftIcon/> {collapsed ? 'Expand' : 'Collapse'}
        </IconButton>
        {!collapsed && (
          <div style={{
            display:"flex",
            flexDirection: "column", 
            alignItems:"center", 
            justifyContent: "space-around", 
            flexGrow:'1', 
          }} >
            Headers List
          </div>
        )}
      </div>
    </Collapse> 
  );
};

2. 升级到Material-UI v5（推荐）

如果项目允许升级，Material-UI v5的Collapse组件已经完善了水平折叠的支持，新增了collapsedWidth属性，只需要简单配置就能实现你想要的效果：

// v5版本示例
<Collapse in={collapsed} orientation="horizontal" collapsedWidth={0}>
  {/* 你的内容容器 */}
</Collapse>

关键说明 #

• 在v4中，orientation="horizontal"主要是用来改变动画的方向（从高度变化改为宽度变化），但缺少对应的宽度控制属性，所以需要手动补充宽度逻辑
• 手动控制时，建议保持动画时长和Collapse组件默认的300ms一致，让整体动画更协调

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