如何在 Material UI 快速拨号按钮中添加文本？

Answer 1

抱歉来晚了，但我最近遇到了这个问题并找到了解决方案：

SpeedDial

附带

FabProps

属性，使您能够修改 Fab（Fab 文档：https://mui.com/material-ui/api/fab/）。
因此，首先您应该修改

Fab

以使用

variant="extended"

。然后要添加文本，请使用

icon

中的

SpeedDialIcon

属性。

所以你的组件应该看起来像这样：

<SpeedDial
  FabProps={{ variant: "extended" }}
  icon={
    <SpeedDialIcon
      icon={
        <Box sx={{ display: "flex" }}>
          <YourIcon />
          <Typography> {/* Your text */} </Typography>
        </Box>
    />
  }
/>

Answer 2

1. 为此目的使用

   SpeedDialAction

    <SpeedDialAction
       key={action.name}
       icon={action.icon} // here goes your icon
       tooltipTitle={action.name} // here goes your text
       tooltipOpen
       onClick={handleClose}
    />

将鼠标悬停时您会看到

• 文档
• 实例

2. 或使用浮动操作按钮达到您的目的

    <Fab
        aria-label={fab.label}
        className={fab.className}
        color={fab.color}
    >
        {fab.icon}
    </Fab>

• 它的文档
• 实例

---

请告诉我它是否适合您）

Answer 3

我最近也遇到了类似的问题。 虽然设计人员可以轻松地在 Figma 或 w/e 中移动组件，但您依赖于 MUI 实现。 在这种情况下，您需要操纵 MuiSpeedDial-root、MuiSpeedDial-actions 和 MuiButtonBase-root 以获得所需的结果。

所以对于我的情况来说，它看起来像这样：

const actions = [
    {
      icon: (
        <Box display="flex" gap={1}>
          <Typography fontSize={14}>{t('dashboard.selectDate')}</Typography>
          <EventIcon />
        </Box>
      ),
      name: t('dashboard.selectDate'),
      onClick: () => {
        handleOpenDateModal();
        handleClose();
      }
    },
    {
      icon: (
        <Box display="flex" gap={1}>
          <Typography fontSize={14}>{t('dashboard.today')}</Typography>
          <CalendarTodayIcon />
        </Box>
      ),
      name: t('dashboard.today'),
      onClick: () => {
        handleSetMonth(getTodayIso());
        handleClose();
      }
    },
    {
      icon: (
        <Box display="flex" gap={1}>
          <Typography fontSize={14}>{t('dashboard.navigation.uploadInvoice')}</Typography>
          <UploadFileIcon />
        </Box>
      ),
      name: t('dashboard.navigation.uploadInvoice'),
      onClick: () => navigate(`/${ROUTING.INVOICE_UPLOAD}`)
    }
  ];
...

<StyledSpeedDial
          ariaLabel="SpeedDial controlled"
          icon={<SpeedDialIcon />}
          onClose={handleClose}
          onOpen={handleOpen}
          open={open}
        >
          {actions.map((action) => (
            <SpeedDialAction
              TooltipClasses={{
                tooltip: 'speed-action-tooltip-hide'
              }}
              key={action.name}
              icon={action.icon}
              tooltipTitle={action.name}
              onClick={action.onClick}
            />
          ))}
        </StyledSpeedDial>

样式组件保存在单独的文件中：

export const StyledSpeedDial = styled(SpeedDial)<SpeedDialProps>(({ theme }) => ({
  position: 'absolute',
  bottom: 20,
  right: 16,
  zIndex: 2500,
  alignItems: 'end',
  '& .MuiSpeedDial-actions': {
    marginLeft: '-50px',
    '& .MuiButtonBase-root': {
      color: theme.colors.contrast,
      height: '40px',
      width: 'fit-content',
      alignSelf: 'flex-end',
      padding: '8px 16px',
      borderRadius: '100px',
      marginRight: 0,
      '& .MuiBox-root': {
        alignItems: 'center'
      }
    }
  }
}));

不要在那些负利润上对我踢得太狠。这对我有用。我必须以这种方式覆盖高度和宽度，因为这是适应该文本的最方便的方法。

我没有找到更优雅的方法，如果你找到了，请告诉我。 附：这就是它的样子