React Material UI custom tooltip AND speed dial style

Question

I'm trying to customize the tooltip appearance and the position of the speed dial but get an error when doing both.

const useStyles = makeStyles((theme) => ({
  root: {
    height: 380,
    transform: "translateZ(0px)",
    flexGrow: 1,
  },
  speedDial: {
    position: "absolute",
    bottom: theme.spacing(2),
    right: theme.spacing(0),
  },
  tooltip: {
    backgroundColor: "#37517e",
    fontSize: "1.1em",
  },
}));

      <SpeedDial
        ariaLabel="Tutor SpeedDial"
        className={classes.speedDial}
        icon={<SpeedDialIcon openIcon={<EditIcon />} />}
        onClose={handleClose}
        onOpen={handleOpen}
        open={open}
      >
        {actions.map((action) => (
          <SpeedDialAction
            key={action.name}
            icon={action.icon}
            tooltipTitle={action.name}
            TooltipClasses={classes}
            onClick={handleClose}
          />
        ))}
      </SpeedDial>

The code actually compiles and works but I get a console error

index.js:1 Material-UI: The key speedDial provided to the classes prop is not implemented in ForwardRef(Tooltip). You can only override one of the following: popper,popperInteractive,popperArrow,tooltip,tooltipArrow,arrow,touch,tooltipPlacementLeft,tooltipPlacementRight,tooltipPlacementTop,tooltipPlacementBottom.

It's pretty clear that the issue is because ToolTipClasses cannot override the speedDial class but I'm not sure how else to do it.

Any guidance will be much appreciated Thanks

score 0 · Answer 1 · answered Aug 25 '21 at 08:44

I came up with solution by by creating a StyledSpeedDial instead so that I could remove the speeddial onbject from the classes style

const StyledSpeedDial = styled(SpeedDial)(({ theme }) => ({
  position: "absolute",
  "&.MuiSpeedDial-directionUp, &.MuiSpeedDial-directionLeft": {
    bottom: theme.spacing(2),
    right: theme.spacing(0),
  },
}));

  <StyledSpeedDial
        ariaLabel="Tutor SpeedDial"
        icon={<SpeedDialIcon openIcon={<EditIcon />} />}
        onClose={handleClose}
        onOpen={handleOpen}
        open={open}
      >
        {actions.map((action) => (
          <SpeedDialAction
            key={action.name}
            icon={action.icon}
            tooltipTitle={action.name}
            TooltipClasses={classes}
            onClick={handleClose}
          />
        ))}
      </StyledSpeedDial>

React Material UI custom tooltip AND speed dial style

1 Answers1