css - 在 Next.js 中应用全局样式

Question

我在 Typescript 中使用 Next.js。正文的边距默认为 8px，我想将其设置为 0px。当我尝试向我的 index.tsx 添加外部样式表时文件它抛出一个错误，你只能将外部样式表添加到 _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> )来设置 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