CODEWITHSUNDEEP
reactjsmaterial-ui
Manuel Rivera
Manuel Rivera

Reputation: 523

how to use html in a material-ui Snackbar message

I'm trying (react) material-ui in my application. It's is something like the example in the docs: 

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

Now, if my message text is: <em><b>Hello</b></em>, it just shows like that: <em><b>Hello</b></em>, and not like: Hello.

Can somebody help me in achieving this?

When I used angularjs in the past, and I continue to use it now, I wrapped the text in an: ng-bind-html="alert.msg | unsafe". Now, I don't now how to do that in material-ui.

Many thanks and bye ...

Upvotes: 1

Views: 1854

Answers (1)

akshay kishore
akshay kishore

Reputation: 1027

You can just pass the message as just text like "Hello" and provide the italics and bold styles with css to the spans

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

Upvotes: 2

Related Questions