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

时间:2019-06-20 09:17:37

标签: reactjs material-ui

我正在尝试在应用程序中使用(反应)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>,而不是: 你好

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

当我过去使用 angularjs 并现在继续使用时,我将文本包装在ng-bind-html="alert.msg | unsafe"中。现在,我现在不在material-ui中如何做到这一点。

非常感谢,再见...

1 个答案:

答案 0 :(得分:1)

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

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