在 Next.js 中应用全局样式

Question

我正在使用 Next.js 和 Typescript。主体的边距默认为 8px，我想将其设置为 0px。当我尝试将外部样式 sheet 添加到我的 index.tsx 文件时，它会抛出一个错误，提示您只能将外部样式 sheet 添加到 _app.tsx。然而，即使我尝试在我的 _app.tsx 中导入，它也不会改变 body 的全局样式。我在样式部分使用 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>
    );
  }
}

Answer 1

您需要一些全局样式 (<style jsx global>) 来设置正文元素的样式或提供 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

Answer 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

Answer 3

这就是您的 _app.js、_app.tsx 的样子； styles.css 可能需要您 CSS 重置默认浏览器属性，您可以尝试在此处添加其他样式表。

import '../styles/styles.css'

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

Answer 4

根据官方docs：

Global CSS cannot be used in files other than your Custom <App> due to its side-effects and ordering problems.

Possible Ways to Fix It

Relocate all Global CSS imports to your pages/_app.js file.

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

嗯，最好的方法是使用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 并且想在使用自定义全局样式的同时使用基础样式，您只需在样式表中使用导入语句（无需导入基础样式在 _app.tsx 中（如果在全局样式表中导入）。一个例子：

// 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.

在 Next.js 中应用全局样式

Applying global styles in Next.js

css

styles

emotion

typescript

next.js