Material-ui Ошибка компонента Snackbar: <div>не может отображаться как потомок <p>

Question

Я использую очень простой пример компонента Snackbar материала, который отображает следующий 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>

для следующего кода

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

Это, естественно, приводит к несовместимости спецификации HTML. Проблема в том, что я не знаю, как сказать Snackbar создать div вместо p element

Я получаю ошибку:

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

Возможно, вы захотите проверить свою версию Material UI или любые настройки переопределения, которые вы, возможно, сделали, включая компоненты типографии. Я просто тестирую снэк-бар с точно таким же кодом и тег p (который использует типографику, эта часть вызывает ошибку) не существует как тег p, но имеет другое имя класса

<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>