在 Next.js 中应用全局样式答案

【问题标题】：Applying global styles in Next.js在 Next.js 中应用全局样式
【发布时间】：2020-06-21 08:26:23
【问题描述】：

我正在使用带有 Typescript 的 Next.js。正文的边距默认为 8px，我想将其设置为 0px。当我尝试将外部样式表添加到我的index.tsx 文件时，它会抛出一个错误，您只能将外部样式表添加到_app.tsx。但是，即使我尝试导入我的_app.tsx，它也不会改变正文的全局样式。我将 Emotion css 用于样式部分。是否有其他方法可以使用全局样式更改索引文件中正文的样式？这是我的index.tsx 代码，我也尝试使用 Emotion CSS 添加全局样式，但它不起作用。

class Index extends React.Component {
  render() {
    return (
      <div className='body'>
        <Container>
          <style jsx global>{`
            .body:global() {
              margin: 0px;
            }
          `}</style>
          <NavBar />
        </Container>
      </div>
    );
  }
}

【问题讨论】：

标签： css typescript styles next.js emotion

【解决方案1】：

您需要一些全局样式 (<style jsx global>) 来设置 body 元素的样式或提供 css 重置。

例子：

import Link from "next/link";

export default () => (
  <div>

    <style jsx global>{`
      body {
        background-color: red;
      }
    `}</style>

    Hello, One!
    <Link href="/two">
      <a>Go to two</a>
    </Link>
  </div>
);

Code Sandbox

【讨论】：

它没有帮助。我已经更新了我的代码，仍然 Next 不接受 body @ddon-90 的边距
你有 .body 这意味着 class"body" 作为 CSS 类。如果要定位 HTML 标记 <body>，请删除 body 前面的点。也不需要global()。我添加了一个代码沙箱作为示例。
你能解释一下这是什么<style jsx global />吗？我的意思是，它是 Next 的功能还是反应？

【解决方案2】：

您可以通过 Next.js 使用情感来获得全局样式

在您的 _app.tsx 文件中，您必须

import { Global, css } from '@emotion/core'

return (
  <>   
    <Global styles={css` /* styles */ `}/>
    <Component {...pageProps} />
  </>

你可以在这里看到如何实现它

https://github.com/pabloobandodev/social-media/blob/master/pages/_app.tsx

【讨论】：

【解决方案3】：

这就是你的 _app.js, _app.tsx 的样子； styles.css 可能有你的 CSS 来重置默认浏览器属性，你可以尝试在这里添加其他样式表。

import '../styles/styles.css'

export default function App({ Component, pageProps }) {
   return <Component {...pageProps} />
}

【讨论】：

【解决方案4】：

据官方docs：

由于其副作用和排序问题，全局 CSS 不能用于您的自定义 <App> 以外的文件中。

可能的修复方法

将所有全局 CSS 导入重新定位到您的 pages/_app.js 文件。

在你的情况下如何做到这一点？

嗯，最好的方法是使用 CSS 基础，我们以 normalize.css 为例。

运行 yarn add normalize.css 或 npm i normalize.css，具体取决于您使用的是哪个。
在您要使用基础的每个页面中添加import 'normalize.css';。 Official Docs.

如果您想在所有页面中使用基础，这似乎是多余的。如果是这样，您也可以创建一个文件page/_app.tsx（任何扩展名.js、.jsx、.ts、.tsx 都可以）并将其放入其中：

import 'normalize.css';

export { default } from 'next/app';

Note ：如果您的应用正在运行并且您刚刚添加了自定义App，则需要重新启动开发服务器。仅当 pages/_app.tsx 之前不存在时才需要。

无需担心文档中提到的其他警告，因为我们只是重新导出 App 而无需任何修改。

有许多可用的 CSS 基础，选择最适合您的。

如果要添加自定义全局样式，请按照以下步骤操作：

创建一个文件styles/globals.css（.scss、.sass 等如果您有configured Next.js properly 也可以使用）并将您的样式放入该文件中。
现在在pages/_app.tsx 中添加一个导入。

import '../styles/globals.css'; // change extension from `.css` to
                                // whatever you created above

export { default } from 'next/app';

如果您已经为../styles 创建了module path alias，那么您可能想要更改样式导入语句（可能更改为import '@styles/globals.css' 之类的内容）。

另外，如果你正在使用 less/sass/scss 并且想同时使用 base 和自定义全局样式，你只需要在样式表中使用 import 语句（不需要在 @ 中导入 base 987654349@ 如果在全局样式表中导入）。一个例子：

// file: styles/globals.scss
@import '../node_modules/normalize.css/normalize.css';

// your styles...
body {
  color: red;
}

// file: pages/_app.tsx
import '@styles/globals.scss';

export { default } from 'next/app';

此外，在您的情况下，它很可能没有工作，因为您使用的是.body 而不是body。 body 中可能存在边距，而不是您的 div.body。

【讨论】：