亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在 Material-UI 中為 ToolTip 標題換行

如何在 Material-UI 中為 ToolTip 標題換行

呼喚遠方 2022-05-14 13:48:21
我正在使用 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));預期:每個文本的換行符,有人可以幫忙嗎?
查看完整描述

2 回答

?
慕碼人8056858

TA貢獻1803條經驗 獲得超6個贊

您可以用 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


查看完整回答
反對 回復 2022-05-14
?
互換的青春

TA貢獻1797條經驗 獲得超6個贊

是的你可以


參考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>

因為你幾乎可以在里面寫任何你想要的東西,所以這應該不是問題。


查看完整回答
反對 回復 2022-05-14
  • 2 回答
  • 0 關注
  • 255 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號