CODEWITHSUNDEEP
javascriptcssreactjssassnext.js
Victor Harlan Lacson
Victor Harlan Lacson

Reputation: 375

Next js override main div

I am learning React and using Next js as a framework.

My project structure simply follow the tutorial and using next-sass with next.config.js

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

What I want is to remove the default margin on all corners of the page. Suppose I want to cover the whole page with #F5F5F5. How can I achieve this?

enter image description here

Upvotes: 2

Views: 2576

Answers (1)

Matt Carlotta
Matt Carlotta

Reputation: 19762

You'll want to do two things:

  1. If this is to be applied to every page, you'll want to make a custom App file, so that you don't have to manually import your main .scss into each page. (important: read the note in the link above about defining getInitialProps within the _app.js file)
  2. Create a .scss file that targets the body element. By default, it has a margin: 8px; style applied to it -- you'll want to override this. Then import this .scss file into the _app.js file.

Working codesandbox:

Edit NextJS Sass Example

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;
}

Upvotes: 2

Related Questions