接下来 js 覆盖 main div

Question

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

我的项目结构简单地遵循教程并使用 next-sass 和 next.config.js

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

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

Answer 1

您需要做两件事：

如果要将其应用到每个页面，您需要制作 a custom App file，这样您就不必手动将主 .scss 导入每个页面。（重要：阅读上面 link 中关于在 _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;
}

接下来 js 覆盖 main div

Next js override main div

javascript

css

sass

reactjs

next.js