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}
        />
    );
}

现在，如果我的消息文本为：Hello，则显示为：Hello，而不是：你好。

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

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

非常感谢，再见...

Answer 1

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

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

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

1 个答案: