如何在 Material-UI 中为工具提示标题制作换行符

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通过 props title添加。

<Tooltip
  title={
    <>
      <Typography color="inherit">Line one</Typography>
      <Typography color="inherit">Line two</Typography>
    </>
  }
>
  <Button>HTML</Button>
</Tooltip>

由于您几乎可以在其中写入任何您想要的内容，因此这应该不是问题。