如何将自定义组件传递给 MUI 工具提示中的标题道具？

Question

我正在尝试通过传递像图像这样的自定义组件来自定义 Tooltip 组件。

第一次用Popover一次，但是我要用Tooltip的主要原因是因为Tooltip的箭头。

基本上，我在 TypeScript 上使用 React 和 MUI v5 运行。

我构建了一个像这样的自定义工具提示组件。

    <Tooltip
      open={open}
      arrow
      placement={placement}
      title={
        <Box component="span" p={1} width={width}>
          <IconButton size="small" onClick={onClose}>
            <CloseIcon />
          </IconButton>
          <Box my={2} px={4}>
            <Typography my={2}>
              {message}
            </Typography>
            <FormControlLabel control={<Checkbox defaultChecked />} label="Don’t show again" />
          </Box>
        </Box>
      }
      {...rest}
    >
      {children}
    </Tooltip>

它似乎可以工作，但它一直显示错误消息 Tooltip title. Zero-length titles string are never displayed. 'title' is specified more than once, so this usage will be overwritten.ts(2783)。

如何解决这个问题，或者我应该使用 Popover 而不是 Tooltip 组件？

Answer 1

您需要在 {...rest} 参数后移动 title 道具。

看起来你的 rest 参数里面已经有 title 属性，所以基本上你是用其他参数覆盖你的 title（至少打字稿认为）。

等同于：

const foo = { title: 'aaaa', sth: 'cccc' };

const bar = { title: 'bbbb', ...foo}

console.log(bar.title); // => 'aaaa'

如果您在某些支持 typescript 的环境中打开此代码，它也会显示与您的相同的错误，请参阅

您需要做的是：

const foo = { title: 'aaaa', sth: 'cccc' };

const bar = { ...foo, title: 'bbbb' };

console.log(bar.title); // => 'bbbb'

如何将自定义组件传递给 MUI 工具提示中的标题道具？

How to pass a custom component to title props in MUI tooltip?

typescript

reactjs

material-ui