如何让 Link 和 IconButton 保持在同一行？

Question

我有一个带有长文本的链接，后面有一个“复制”图标。 我不希望图标单独在单独的一行上呈现。

所以这些应该没问题：

但不是这个：

基本代码是：

<>
 <Link>cat dog cow pig owl rabbit hare wolf fox</Link>
 <IconButton><EditIcon/></IconButton>
</>

我可以使用 flexbox 轻松地将图标放在右侧，但不确定如何有效地在文本和图标之间插入不间断空格。

Answer 1

我刚遇到同样的问题，我设法使用MUI 的 Grid解决了它。 我必须在我的案例中做一些字符串拆分，所以我也包括在这里。 希望这可以帮助！

<Link onClick={() => { alert('test'); }}>
  <Grid container direction="row" alignItems="center">
    <Grid item>
      <Typography variant="body1">
        {linkText.split(' ').slice(0, -1).join(' ')}
      </Typography>
    </Grid>
    <Grid item>
      <Typography variant="body1" display="flex" alignItems="center">
        {linkText.split(' ').slice(-1)}
        <IconButton>
          <EditIcon
            onClick={(event) => {
              event?.stopPropagation();
              // do stuff
            }}
          />
        </IconButton>
      </Typography>
    </Grid>
  </Grid>
</Link>