Применение глобальных стилей в nextjs - PullRequest
Новая
       14

Применение глобальных стилей в nextjs

0 голосов
/ 09 марта 2020

Я использую Next js с 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>
        );
    }
}

1 Ответ

1 голос
/ 09 марта 2020

Вам нужно несколько глобальных стилей (<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>
);

Код Песочница

...