Question

我正在使用非常简单的材料ui 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 元素

我得到了错误：

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

可能想要检查您的材料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>

Answer 2

对于正在寻找除覆盖错误之外的答案的其他人来说，很可能如果您的覆盖没有任何问题，甚至在您检查之前。查看您的代码是否包含继承 component 组件的 props 的 Typography，例如 DialogContentText 并且您还有另一个 Typography 组件或将转移到 HTML 中的 <p> 标记作为该 child 的 component。

在上面的错误中message props 会变成

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

我认为这不会再出现在新版本的材料中。但是，如果您想修复类似的问题，请查看；这会出错


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

这会解决它

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

    );
  };

例如，在这种情况下，您可以将 Typography 的普通 props 与 DialogContentText 一起使用。

您也可以将 component='div' 用作 prop 的 Typography，它可以修复它，我没有测试

material-ui Snackbar组件错误：<div>不能作为<p>的后代出现

2 个答案: