反应-材质ui工具提示箭头未与按钮/容器对齐

Question

我正在尝试使用Appbar中的Material Ui工具提示，但该工具提示未与图标或容器对齐

使用docs中的简单工具提示示例时相同：

  <Tooltip title="Delete" arrow>
      <IconButton>
          <NotificationsOutlinedIcon color="primary" />
      </IconButton>
  </Tooltip>

仅在应用栏内使用时才发生此问题 而且由于使用flex-grow的文本排版，当我删除文本时，该如何解决？

我的代码：

<div className={classes.root}>
  <AppBar position="static">
    <Toolbar>
      {logo}
      <Typography className={classes.title}>
        <ViewDropDownMenu/>
      </Typography>
        <Tooltip title="tooltip" arrow>
            <IconButton aria-label="tooltip">
            <DeleteIcon color="primary" />
        </IconButton>
       </Tooltip>
      {/* </div> */}
    </Toolbar>
  </AppBar>
</div>

样式：

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      backgroundColor: theme.palette.background.default
    },
    appbar: {
      justifyContent: 'center',
      height: '100%'
    },
    menuButton: {
      marginRight: theme.spacing(2)
    },
    title: {
      flexGrow: 1,
      textAlign: 'center',  
      color: theme.palette.text.primary
    },
    logo: {
      maxWidth: 79
    }
  })
);

所以当我删除classes.title

Answer 1

根据我在docs中看到的内容，应该指定for i in range(0, len(rects), 100): output = image.copy() for (x, y, w, h) in rects[i:i + 100]: color = [random.randint(0, 255) for j in range(0, 3)] cv2.rectangle(output, (x, y), (x + w, y + h), color, 2) cv2.imshow("Output", output) key = cv2.waitKey(0) & 0xFF 的位置。您想将其放在底部的中间。因此，您的arrow值应为：

placement

更新 （评论）

<Tooltip arrow title={props.title} color="inherit" placement={"bottom"} // here you should specify your placement value PopperProps={{ disablePortal: shouldDisablePortal }} open={open} disableFocusListener={shouldDisableFocusListener} disableHoverListener={props.disableHoverListener} > <span>{props.children}</span> </Tooltip> 位于Tooltip。它可能具有absolute的{​​{1}}属性。如果您修改right的宽度，它将相对于该新宽度进行定位，从而使0出现在左侧。

免责声明

我并不是说这是解释，但我认为它与此或scrollbar有关。