0

我正在尝试自定义工具提示外观和快速拨号的位置，但是在同时执行这两个操作时会出错。

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>

在此处输入图像描述

代码实际上可以编译并且可以工作，但是我得到一个控制台错误

index.js:1 Material-UI：speedDial提供给 classes 属性的键未在 ForwardRef(Tooltip) 中实现。您只能覆盖以下选项之一：popper、popperInteractive、popperArrow、tooltip、tooltipArrow、arrow、touch、tooltipPlacementLeft、tooltipPlacementRight、tooltipPlacementTop、tooltipPlacementBottom。

很明显，问题是因为 ToolTipClasses 无法覆盖 speedDial 类，但我不知道该怎么做。

任何指导将不胜感激谢谢

4

1 回答 1

0

我通过创建一个 StyledSpeedDial 来提出解决方案，这样我就可以从类样式中删除快速拨号对象

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>
于 2021-08-25T08:44:46.563 回答