下一个js覆盖main div

debugcn 发表于 Dev

维克多·哈伦·拉克森

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

我的项目结构仅需遵循本教程，并将next-sass与next.config.js结合使用

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

我想要的是删除页面所有角落的默认边距。假设我想用＃F5F5F5覆盖整个页面。我该如何实现？

马特·卡洛塔

您需要做两件事：

如果将此方法应用于每个页面，则需要制作一个自定义的App文件，这样就不必手动将主文件.scss导入每个页面。（重要：请阅读上面链接中有关getInitialProps在_app.js文件中定义的注释）
创建一个.scss以该body元素为目标的文件。默认情况下，它已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;

样式/ index.scss

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。