下一个js覆盖主div答案

【问题标题】：Next js override main div下一个js覆盖主div
【发布时间】：2020-05-11 07:31:45
【问题描述】：

我正在学习 React 并使用 Next js 作为框架。

我的项目结构只是按照教程使用 next-sass 和 next.config.js

//-- next.config.js
module.exports = withSass({
  sassLoaderOptions: {
    includePaths: ["absolute/path/a", "absolute/path/b"]
  }
})

我想要的是删除页面所有角落的默认边距。假设我想用#F5F5F5 覆盖整个页面。我怎样才能做到这一点？

【问题讨论】：

使用检查器查看添加边距的元素，然后添加选择该元素并将边距设置为 0 的 CSS 规则。
@Mjuice 我试图这样做，但我找不到覆盖外部 div 的方法，因为它不是我声明的 div，它是我认为下一个 js 放置任何组件的 div .关于如何访问它的任何想法？

标签： javascript css reactjs sass next.js

【解决方案1】：

你需要做两件事：

如果要将其应用于每个页面，您需要创建a custom App file，这样您就不必手动将主.scss 导入每个页面。（重要：阅读上面链接中关于在_app.js 文件中定义getInitialProps 的注释）
创建一个以body 元素为目标的.scss 文件。默认情况下，它应用了margin: 8px; 样式——您需要覆盖它。然后将import这个.scss文件放入_app.js文件中。

工作代码和框：

pages/_app.js

import React from "react";
import App from "next/app";
import Head from "next/head";
import "../styles/index.scss";

class MyApp extends App {
  // remove this 'getInitialProps' if you don't plan on render blocking
  // for example, signing a user in before the requested page is loaded
  static async getInitialProps({ Component, ctx }) {
    return {
      pageProps: {
        ...(Component.getInitialProps
          ? await Component.getInitialProps(ctx)
          : {})
      }
    };
  }

  render() {
    const { Component, pageProps } = this.props;
    return (
      <>
        <Head>
          <link rel="icon" href="/favicon.ico" />
        </Head>
        <Component {...pageProps} />
      </>
    );
  }
}

export default MyApp;

styles/index.scss

$foreground: #007ec5;
$background: #ebebeb;

body {
  background: $background;
  color: $foreground;
  padding: 20px;
  margin: 0;
  min-height: 100vh;
}

【讨论】：