как использовать html в сообщении Snackbar Material-UI - PullRequest
Новая
       14

как использовать html в сообщении Snackbar Material-UI

0 голосов
/ 20 июня 2019

Я пытаюсь (реагировать) 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.

Большое спасибо и пока ...

1 Ответ

1 голос
/ 20 июня 2019

Вы можете просто передать сообщение как простой текст, например "Hello", и предоставить курсиву и полужирному стилю css интервалы 

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