1

我正在使用mdx-bundlerand创建一个 Next.js 博客styled-components。我正在使用remark-mdx-images将图像导入 JSX。我创建了一个自定义组件 ( styled.div) 来嵌入next/image其中。

但是当我在浏览器中运行博客时，我收到一条错误消息，说validateDOMNesting(...): <div> cannot appear as a descendant of <p>.我尝试将其切换到styled.span，但它根本不显示图像，即使它在 DOM 中呈现

我还收到另一个警告：Expected server HTML to contain a matching <div> in <p>.

下面是我的代码

import Image from 'next/image';

const CustomImage = styled.div` // cannot change this to styled.span
    position: relative;
    aspect-ratio: 16/9;

    & .image{
    width: 100% !important;
    height: unset !important;
    min-height: unset !important;
    min-width: unset !important;
    }

`

const MDXImage = (props) => {

    return (
        <CustomImage>
            <Image className='image' src={props.src} alt={props.alt} layout="fill" objectFit="contain" />
        </CustomImage>
    )
}

以下是完整的错误：

Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.
    at div
    at O (webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:31:19811)
    at MDXImage (webpack-internal:///./pages/blog/[slug].js:52:19)
    at p
    at p
    at main
    at div
    at Post (webpack-internal:///./pages/blog/[slug].js:138:19)
    at MyApp (webpack-internal:///./pages/_app.js:24:24)
    at StyleRegistry (webpack-internal:///./node_modules/styled-jsx/dist/stylesheet-registry.js:231:34)
    at ErrorBoundary (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ErrorBoundary.js:26:47)
    at ReactDevOverlay (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ReactDevOverlay.js:90:23)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:265:5)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:769:24)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:914:26)
4

0 回答 0