我正在使用自定义的 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