如何实现固定在窗口底部、点击从下往上展开的MUI Accordion？

你无需额外引入第三方生态组件，直接对Material UI原生的Accordion折叠组件做定制即可满足需求，具体实现逻辑和代码如下：

• 外层容器设置固定定位，固定在页面底部：给包裹Accordion的外层div添加position: fixed、bottom: 0、width: 100%属性，确保组件始终吸附在页面底部
• 调整展开动画的原点：给Accordion组件添加样式配置，将内部Collapse动画组件的变换原点设置为bottom center，即可把默认从上往下的展开效果改为从下往上
• 页面适配：如果需要避免展开的折叠组件遮挡页面底部原有内容，可给页面主内容容器设置和折叠组件收起状态高度一致的padding-bottom值

import { Accordion, AccordionSummary, AccordionDetails, Typography } from '@mui/material';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

const BottomUpFoldComponent = () => {
  return (
    // 外层容器固定在页面底部
    <div style={{ position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: 999 }}>
      <Accordion 
        sx={{
          // 修改动画原点，实现从下往上展开
          '& .MuiCollapse-root': {
            transformOrigin: 'bottom center',
          },
          // 可自定义添加其他样式，比如收起状态的背景色、圆角等
        }}
      >
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-label="展开折叠面板"
          aria-controls="fold-content"
          id="fold-header"
        >
          <Typography>折叠面板头部</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            此处为展开后的内容区域，可自定义插入任意内容
          </Typography>
        </AccordionDetails>
      </Accordion>
    </div>
  )
}

export default BottomUpFoldComponent;

如果需要更轻量化的交互，也可以直接使用MUI原生的Drawer抽屉组件，设置anchor="bottom"属性，即可直接实现底部向上滑出的折叠效果，无需额外修改动画规则。

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