Styled Speed Dial MUI-CodePudding

Good afternoon. I'm using Speed dial component for MUI and can't figure out how to style tooltipTytle. I can do something only when all tooltips are shown at once, but this does not suit me and I need them to be shown only on hover. Can this be done somehow?

export const WidgetsMenu = () => {
    return (
        <StyledEngineProvider injectFirst>
        <SpeedDial
            ariaLabel="SpeedDial openIcon example"
            icon={<SpeedDialIcon openIcon={<CloseIcon />} />}
            className={styles.speedDial}
        >
            {actions.map((action) => (
                <SpeedDialAction
                    key={action.name}
                    icon={action.icon}
                    tooltipTitle={action.name}
                />
            ))}
        </SpeedDial>
        </StyledEngineProvider>
    );
};

I use styling through modules, other options do not suit me:

.speedDial :global {
  position: absolute;
  bottom: 3rem;
  right: 3rem;
  @media only screen and (max-width: 600px) {
    bottom: 2rem;
    right: 1.5rem;
  }

  .MuiSpeedDial-fab {
    color: #070707;
    background-color: #ffffff;
    width: 3rem;
    height: 3rem;
  }

  .MuiSpeedDialAction-fab {
    color: #ffffff;
    background-color: #070707;
    width: 3rem;
    height: 3rem;
  }
}

Codesandbox: https://codesandbox.io/embed/serene-dhawan-sii571?fontsize=14&hidenavigation=1&theme=dark

CodePudding user response：

You can override the tooltip component for the SpeedDialAction through componentsProps

      <SpeedDialAction
        key={action.name}
        icon={action.icon}
        tooltipTitle={action.name}
        componentsProps={{
          tooltip: {
            sx: {
              bgcolor: "pink",
              color: "white"
            }
          }
        }}
      />