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

Question

How to change the material ui speeddial button, apparently it uses the Fab default and all you can do is to change the Icon, but I need to add a text as well, for example:

<Fab variant="extended">
    <NavigationIcon />
    Actions
</Fab>

Answer 1

Use SpeedDialAction for this purpose

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

On hover you will see

• Documentation for it
• Live example

---

Please, let me know if it works for you or not )

Answer 2

Sorry that this is late, but I recently ran into this problem and found the solution:

SpeedDial comes with FabProps prop to enable you to modify the Fab (Fab docs: https://mui.com/material-ui/api/fab/ ).
So firstly you should modify the Fab to use variant="extended" . Then to add your text, use the icon prop from SpeedDialIcon .

So your component should look something like this:

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