material-ui Snackbar component error : <div> cannot appear as a descendant of <p> - material-ui

Question

I'm using a very simple sample of the material ui Snackbar component, that renders the following HTML
<div class="MuiSnackbar-root-352 MuiSnackbar-anchorOriginBottomLeft-358">
<p class="MuiTypography-root-199 MuiTypography-body2-207 MuiPaper-root-121 MuiPaper-elevation6-129 MuiSnackbarContent-root-373" role="alertdialog" aria-describedby="message-id" direction="up" style="transform: translate(0px, 0px); transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;">
<div class="MuiSnackbarContent-message-374">
<span id="message-id">TunisiaNet created!</span>
</div>
</p>
</div>
for the following code
<Snackbar
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
}}
open={this.state.entityGroupAdded}
autoHideDuration={4000}
onClose={this.handleClose}
ContentProps={{
'aria-describedby': 'message-id',
}}
message={<span id="message-id">{this.state.name} created!</span>}
/>
This naturally leads to an HTML specification incompatibility. The issue is that I don't know how to tell the Snackbar to create a div instead of a p element
I get the error:
0.chunk.js:101009 Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.
in div (created by SnackbarContent)
in p (created by Typography)
in Typography (created by WithStyles(Typography))
in WithStyles(Typography) (created by Paper)
in Paper (created by WithStyles(Paper))
in WithStyles(Paper) (created by SnackbarContent)
in SnackbarContent (created by WithStyles(SnackbarContent))

Answer 1

Might wanna check your Material UI version or any override settings you might have made which includes typography components. I just tested a snackbar with the exact same code and the p tag (which uses typography, this part is causing the error) does not exist as a p tag but a different classname
<div class="MuiSnackbar-root-185 MuiSnackbar-anchorOriginBottomLeft-191">
<div class="MuiTypography-root-313 MuiTypography-body1-322 MuiPaper-root-20 MuiPaper-elevation6-28 MuiSnackbarContent-root-310" role="alertdialog" aria-describedby="message-id" style="transform: translate(0px, 0px); transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;">
<div class="MuiSnackbarContent-message-311">
<span id="message-id">Note archived</span></div>
</div>

Answer 2

For other who is looking for an answer other than something wrong with the overrides, most likely if nothing wrong with your overrides, and even before you check for that. Look into your code if it contain a component that inherit the props of Typography component like DialogContentText and you also have another Typography component or a component that will transfer to <p> tag in HTML as a child of that component.
In the the error above message props will become
<p class="MuiTypography-root-199 MuiTypography-body2-207 MuiPaper-root-121 MuiPaper-elevation6-129 MuiSnackbarContent-root-373" role="alertdialog" aria-describedby="message-id" direction="up" style="transform: translate(0px, 0px); transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;">
<div class="MuiSnackbarContent-message-374">
<span id="message-id">TunisiaNet created!</span>
</div>
</p>
I think this is not showing anymore in the new versions of material. But if you want to fix something like that take a look;
This will give errors
const someFunction= (): JSX.Element => {
return (
<DialogTitle>
Some title
</DialogTitle>
<DialogContentText>
<Typography variant='h5'>
Sometext
<Typography />
</DialogContentText>
<TextField
autoComplete='off'
margin='dense'
variant="outlined"
id='name'
label='email'
type='email'
fullWidth
/>
);
};
this will fix it
const someFunction= (): JSX.Element => {
return (
<DialogTitle>
Some title
</DialogTitle>
<DialogContentText variant='h5'>
Sometext
</DialogContentText>
<TextField
autoComplete='off'
margin='dense'
variant="outlined"
id='name'
label='email'
type='email'
fullWidth
/>
);
};
In this case for example you can use the normal props of Typography with DialogContentText.
Also you can user component='div' as prop of Typography, it could fix it, I didn't test