Следующая js переопределить основной div - PullRequest
Новая
       64

Следующая js переопределить основной div

2 голосов
/ 25 января 2020

Я изучаю React и использую Next js в качестве фреймворка.

Моя структура проекта просто следует учебнику и использую next-sass с next.config. js

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

То, что я хочу, это удалить поля по умолчанию во всех углах страницы. Предположим, я хочу покрыть всю страницу # F5F5F5. Как мне этого добиться?

enter image description here

1 Ответ

2 голосов
/ 25 января 2020

Вы захотите сделать две вещи:

  1. Если это будет применяться к каждой странице, вы захотите сделать пользовательским файлом приложения , чтобы Вам не нужно вручную импортировать ваш основной .scss на каждую страницу. ( важно : прочитайте примечание в ссылке выше об определении getInitialProps в файле _app.js)
  2. Создайте файл .scss, предназначенный для элемента body. По умолчанию к нему применяется стиль margin: 8px; - вы захотите переопределить это. Затем import этот .scss файл в файл _app.js.

Рабочие коды и поля :

Edit NextJS Sass Example

страниц / _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;

style / index.s css

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

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