我正在学习 React 并使用 Next js 作为框架。
我的元素结构只是遵循教程并使用 next-sass 和 next.config.js
//-- next.config.js
module.exports = withSass({
sassLoaderOptions: {
includePaths: ["absolute/path/a", "absolute/path/b"]
}
})
我想要的是删除页面所有 Angular 上的默认边距。假设我想用 #F5F5F5 覆盖整个页面。我怎样才能实现这个目标？
最佳答案
您需要做两件事:
- 如果要将其应用于每个页面，您需要将其设为 a custom App file ，这样您就不必手动将主
.scss导入到每个页面中。 (重要:请阅读上面链接中有关在_app.js文件中定义getInitialProps的注释) - 创建一个针对
body元素的.scss文件。默认情况下，它应用了margin: 8px;样式 - 您需要覆盖它。然后将此.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;
}
关于javascript - 接下来的js覆盖主div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59905470/