Question

我正在将Nextjs与Typescript一起使用。正文的边距默认为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>
        );
    }
}

Answer 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

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 的样子； style.css 可能有你的 CSS 来重置默认浏览器属性，你可以在这里尝试添加其他样式表。

import '../styles/styles.css'

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

Answer 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（如果您有 configured Next.js properly，.scss、.sass 等也可以使用）并将您的样式放入该文件中。< /p>
现在在 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 并且想同时使用基础和自定义全局样式，您只需要在样式表中使用导入语句（无需在 { 中导入基础） {1}}（如果在全局样式表中导入）。一个例子：

_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。

在nextjs中应用全局样式

4 个答案: