如何在 Material-UI 中为 ToolTip 标题换行

Question

我正在使用 ToolTip 组件，我有两个标题文本，只是想知道是否可以将它们呈现为两行（每种语言在一行中）而不是一行？如何将预期的样式应用于此组件？这是代码：renderToolTip = tipText => {    const { classes } = this.props;    if (tipText) {      return (        <Tooltip          title={tipText}          placement="left"          classes={{            tooltip: classes.tooltip,          }}>          <IconButton>            <InfoOutlined />          </IconButton>        </Tooltip>      );    }    return null;  };languageList = ['English', 'Spanish']languageList.map(language => this.renderToolTip(language));预期：每个文本的换行符，有人可以帮忙吗？

Answer 1

您可以用 a 包裹您的标题span并为其添加样式，如下所示：

<Tooltip

  title={<span style={{ whiteSpace: 'pre-line' }}>{tipText}</span>}

  placement="left"

  classes={{

    tooltip: classes.tooltip,

  }}>

    <IconButton>

      <InfoOutlined />

    </IconButton>

</Tooltip>

现在，当您的文本包含\n任何地方时，它将换行。例如，您可以有如下文本：

Hey there,\nCome here

这将呈现为：

Hey there,

Come here

Answer 2

是的你可以

参考materia-uicustomized-tooltips官方文档

在线尝试：https ://stackblitz.com/run?file=demo.js

您可以customized HTML content通过道具title添加。

<Tooltip

  title={

    <>

      <Typography color="inherit">Line one</Typography>

      <Typography color="inherit">Line two</Typography>

    </>

  }

>

  <Button>HTML</Button>

</Tooltip>

因为你几乎可以在里面写任何你想要的东西，所以这应该不是问题。