React MUI Collapse组件水平展开时向左而非向右的实现咨询

要让MUI的可折叠面板向左展开，核心是通过修改Collapse组件的横向展开逻辑，调整变换原点和过渡样式，以下是具体实现步骤和代码示例：

核心思路 #

MUI的Collapse组件默认横向展开方向是向右，我们可以通过自定义CSS修改其变换原点和过渡状态，将展开方向反转至左侧，同时配合布局确保面板在正确位置显示。

实现代码 #

方式一：绝对定位布局 #

适合面板悬浮在按钮左侧的场景：

import { useState } from 'react';
import { Collapse, Button, Paper, Box } from '@mui/material';

export default function LeftExpandPanel() {
  const [open, setOpen] = useState(false);

  return (
    <Box sx={{ position: 'relative', display: 'flex', justifyContent: 'flex-end', gap: 1 }}>
      <Button variant="contained" onClick={() => setOpen(!open)}>
        {open ? '收起面板' : '展开面板'}
      </Button>
      <Collapse
        orientation="horizontal"
        in={open}
        sx={{
          position: 'absolute',
          right: '100%',
          top: 0,
          marginRight: 1,
          '&.MuiCollapse-horizontal': {
            transformOrigin: 'right center',
            '&.MuiCollapse-entered': { 
              transform: 'translateX(0)',
              width: 'auto' 
            },
            '&.MuiCollapse-hidden': { 
              transform: 'translateX(100%)',
              width: 0 
            },
            transition: 'transform 300ms ease-in-out, width 300ms ease-in-out',
          },
        }}
      >
        <Paper sx={{ p: 2, minWidth: 240 }}>
          左侧展开面板内容<br/>
          支持多行文本或复杂组件
        </Paper>
      </Collapse>
    </Box>
  );
}

方式二：Flex反向布局 #

适合面板和按钮在同一行，收起时不占用布局空间：

import { useState } from 'react';
import { Collapse, Button, Paper, Box } from '@mui/material';

export default function LeftExpandPanel() {
  const [open, setOpen] = useState(false);

  return (
    <Box sx={{ display: 'flex', flexDirection: 'row-reverse', alignItems: 'center', gap: 1 }}>
      <Button variant="contained" onClick={() => setOpen(!open)}>
        {open ? '收起面板' : '展开面板'}
      </Button>
      <Collapse
        orientation="horizontal"
        in={open}
        sx={{
          '&.MuiCollapse-horizontal': {
            transformOrigin: 'right center',
            '&.MuiCollapse-entered': { 
              transform: 'translateX(0)',
              width: 'auto' 
            },
            '&.MuiCollapse-hidden': { 
              transform: 'translateX(100%)',
              width: 0 
            },
            transition: 'transform 300ms ease-in-out, width 300ms ease-in-out',
          },
        }}
      >
        <Paper sx={{ p: 2, minWidth: 240 }}>
          左侧展开面板内容<br/>
          与按钮在同一行布局
        </Paper>
      </Collapse>
    </Box>
  );
}

关键细节说明 #

• orientation="horizontal"：开启Collapse的横向展开模式
• transformOrigin: 'right center'：将变换原点设置在面板右侧中心，确保展开/收起时围绕该点变换
• 过渡样式：通过修改MuiCollapse-entered（展开状态）和MuiCollapse-hidden（收起状态）的transform和width属性，实现向左展开的动画效果
• 布局调整：根据场景选择绝对定位或flex反向布局，确保面板在按钮左侧正确显示

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