高速拨号MUI

Question

下午好。我正在为Speed ​​dial使用MUI组件，并且不知道如何设计tooltipTytle样式。只有当所有工具提示同时显示时，我才能做一些事情，但这不适合我，我需要它们只在悬停时显示。这能做得到吗？

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>
    );
};

我通过模块使用样式，其他选项不适合我：

.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

Answer 1

可以通过SpeedDialAction通过componentsProps覆盖工具提示组件。

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