Javascript 下一个js覆盖主div_Javascript_Css_Reactjs_Sass_Next.js

Javascript 下一个js覆盖主div

javascript css reactjs sass next.js

Javascript 下一个js覆盖主div,javascript,css,reactjs,sass,next.js,Javascript,Css,Reactjs,Sass,Next.js,我正在学习React并使用Next js作为框架我的项目结构只需按照教程进行操作，并在next.config.js中使用next sass //-- next.config.js module.exports = withSass({ sassLoaderOptions: { includePaths: ["absolute/path/a", "absolute/path/b"] } }) 我想要的是删除页面所有角落的默认边距。假设我想用#f5覆盖整页。我怎样才能做到这一点

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

我的项目结构只需按照教程进行操作，并在next.config.js中使用next sass

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

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

您需要做两件事：

如果要将此应用于每个页面，则需要进行修改，这样就不必手动将main

.scss

导入每个页面。（重要：阅读上面链接中关于在

\u app.js

文件中定义

getInitialProps

的说明）

创建一个针对

主体

元素的

.scss

文件。默认情况下，它有一个

边距：8px应用于它的样式--您将希望覆盖此。然后将这个.scss
文件导入\u 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;

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

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

使用inspector查看哪个元素正在添加边距，然后添加一个CSS规则，选择该元素并将边距设置为0。@Mjuice我尝试过这样做，但我找不到方法覆盖外部div，因为它不是我声明的div，而是下一个js放置我制作的任何组件的div。关于如何访问它有什么想法吗？