Reactjs - MUI HTML 工具提示不适用于动态 HTML 内容

问题描述 投票:0回答:0

我正在使用自定义的 HTML MUI 工具提示。它正在处理静态内容。我想让它充满活力。它不适用于动态 html 内容。

我正在尝试以下方式。

const ADJUSTMENT_HELP_TEXT = styled(()=>(
    <Typography component="div">
        <em>Adjustments can be added as following.</em>
        <ul><li>You can include previous due amount.</li><li>You can exlude amount.</li><li>You can add Waive-Off etc.</li></ul>
    </Typography>
))


const HtmlTooltip = styled(({ className, ...props }) => (
  <Tooltip {...props} classes={{ popper: className }} />
))(({ theme }) => ({
  [`& .${tooltipClasses.tooltip}`]: {
    backgroundColor: '#f5f5f9',
    color: 'rgba(0, 0, 0, 0.87)',
    maxWidth: 220,
    fontSize: theme.typography.pxToRem(12),
    border: '1px solid #dadde9',
  },
}));

return <>
<HtmlTooltip  
    title={<Fragment>{<ADJUSTMENT_HELP_TEXT />}</Fragment>}>
    <HelpTwoToneIcon /> 
</HtmlTooltip>
</>

更新

如果我更喜欢如下静态内容,它工作正常:

<HtmlTooltip  
    title={<Fragment>
            <Typography component="div">
                <em>Adjustments can be added as following.</em>
                <ul><li>You can include previous due amount.</li><li>You can exlude amount.</li><li>You can add Waive-Off etc.</li></ul>
            </Typography>
    </Fragment>}>
    <HelpTwoToneIcon /> 
</HtmlTooltip>

我想让内容动态化

MUI 参考 在 MUI 上看起来像这样here

javascript reactjs material-ui mui5
© www.soinside.com 2019 - 2024. All rights reserved.