如何在Material UI Speed Dial按钮中添加文本内容？

核心思路：MUI SpeedDial的icon、openIcon属性支持传入任意React节点，不需要修改组件源码，直接替换默认图标为带文本的extended Fab组件即可实现需求。

实现示例 #

首先导入相关依赖：

import { SpeedDial, SpeedDialAction, Fab } from '@mui/material';
import NavigationIcon from '@mui/icons-material/Navigation';
import CloseIcon from '@mui/icons-material/Close';
// 按需引入你需要的其他图标和业务依赖

组件实现代码：

<SpeedDial
  ariaLabel="带文本的SpeedDial"
  sx={{ position: 'fixed', bottom: 24, right: 24 }}
  // 收起状态的按钮配置
  icon={
    <Fab variant="extended" sx={{ paddingX: 2 }}>
      <NavigationIcon sx={{ marginRight: 1 }} />
      Actions
    </Fab>
  }
  // 展开状态的按钮配置，不需要区分展开/收起样式可以和icon配置保持一致
  openIcon={
    <Fab variant="extended" sx={{ paddingX: 2 }}>
      <CloseIcon sx={{ marginRight: 1 }} />
      关闭
    </Fab>
  }
>
  {/* 原有SpeedDial子项无需修改 */}
  <SpeedDialAction icon={<FileCopyIcon />} tooltipTitle="复制" />
  <SpeedDialAction icon={<SaveIcon />} tooltipTitle="保存" />
  <SpeedDialAction icon={<PrintIcon />} tooltipTitle="打印" />
</SpeedDial>

注意事项 #

• 该方案兼容MUI 4、MUI 5及以上版本，MUI 4版本中将sx属性替换为className/classes配置样式即可
• 若出现按钮宽度适配异常，可给SpeedDial根节点添加固定宽度配置，比如sx={{ width: 140 }}
• 按钮的文本样式、背景色、圆角等所有Fab支持的属性都可以直接在自定义的Fab组件上配置

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