如何在 material-ui Snackbar 消息中使用 html

Question

我正在我的应用程序中尝试（反应）material-ui。这类似于文档中的示例：

function MySnackbarContentWrapper(props) {
    const classes = useStyles1();
    const { className, message, variant, ...other } = props;
    const Icon = variantIcon[variant];

    return (
        <SnackbarContent
            className={clsx(classes[variant], className)}
            aria-describedby="client-snackbar"
            message={
                <span id="client-snackbar" className={classes.message}>
                    <Icon className={clsx(classes.icon, classes.iconVariant)} />
                    {message}
                </span>
            }
            action={[
                <IconButton key="close" aria-label="Close" color="inherit" onClick={props.close}>
                    <CloseIcon className={classes.icon} />
                </IconButton>,
            ]}
            {...other}
        />
    );
}

现在，如果我的消息文本是：<em><b>Hello</b></em>，它只会显示为：<em><b>Hello</b></em>，而不是：Hello。

有人可以帮助我实现这一目标吗？

当我过去使用 angularjs 时，我现在继续使用它，我将文本包裹在一个：ng-bind-html="alert.msg | unsafe" 中。现在，我现在不知道如何在 material-ui 中做到这一点。

非常感谢和再见...

Answer 1

您可以将消息作为“Hello”之类的文本传递，并为跨度提供带有 css 的斜体和粗体样式

.spanClass{
  font-style: italic;
  font-weight: 600;
}