小编Roh*_*r18的帖子

_app.js 中的 Nextjs Head 覆盖子组件中的 Head

在我的 nextjs 应用程序中,我在 _app.js 中有一个 Head 标签,如下所示

<GoogleReCaptchaProvider reCaptchaKey={CAPTCHA_SECRET}>
  <Head>
    <html lang="en"></html>
  </Head>
  <DndProvider backend={HTML5Backend}>
    <HttpsRedirect>
      <Fragment>
        <Component {...pageProps} />
        <ToastContainer />
      </Fragment>
    </HttpsRedirect>
  </DndProvider>
</GoogleReCaptchaProvider>
Run Code Online (Sandbox Code Playgroud)

对于所有页面上的 html 中的 lang 属性,但在我的名为 Layout 的子组件中,它呈现所有页面的组件,我还有一个 Head 标签:

<Head>
    <head>
      <title>{title}</title>
      {inject_divs}
      <meta
        name="viewport"
        content="width=device-width,initial-scale=1,maximum-scale=1"
      />
    </head>
  </Head>
Run Code Online (Sandbox Code Playgroud)

每当我删除 _app.js 中的 Head 时,布局组件中的 Head 标签都会起作用,但是当我将 Head 保留在 _app.js 中时,布局 Head 会被覆盖,有没有办法可以同时使用两者?

javascript reactjs next.js

6
推荐指数
0
解决办法
2026
查看次数

边距在 flexbox 内不起作用以将孩子带到父母之外

我有一个文本编辑器,其中有一个图像工具,它有一个插入功能,可以在左侧和右侧添加边距,但如果您想将图像移到父容器之外,则只有左边距有效,但右边距只是停在边缘容器

.draft-bg {
  padding-top: 10px;
  padding-bottom: 1px;
}

.image-parent-container {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin: 0rem;
}

.image-parent {
  width: 778px;
  height: auto;
  margin-top: 0px;
  margin-bottom: 0px;
}

img {
  width: 100%;
  height: auto;
  margin-right: 1000px;
  margin-left: 0px;
}
Run Code Online (Sandbox Code Playgroud)
<div class="draft-bg">
  <div class="image-parent-container">
    <div class="image-parent">
      <img src="https://images.unsplash.com/photo-1519681393784-d120267933ba?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" />
    </div>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

html css

5
推荐指数
1
解决办法
38
查看次数

标签 统计

css ×1

html ×1

javascript ×1

next.js ×1

reactjs ×1