Next js отображает причудливые стили для bootstrap компонентов после каждого обновления - PullRequest
Новая
       33

Next js отображает причудливые стили для bootstrap компонентов после каждого обновления

0 голосов
/ 06 февраля 2020

вот в чем проблема:

, когда я открываю страницу или жёсткую ссылку sh, она загружает все компоненты правильно, за исключением некоторых кнопок и элементов управления формы из bootstrap 4, и это приводит к причудливому стилю форма и значки

Я использую Bootstrap 4 через тег ссылки CDN в _app. js вместо его установки из npm.

вот нежелательный результат enter image description here

, но когда я каким-либо образом изменяю размер окна (максимизирую или перетаскиваю) или когда я что-то делаю, это приводит к перекомпиляции, неожиданно загружаются правильные стили, и все в порядке, но любое жесткое обновление sh приведет к тому же неправильному стилю снова!

вот правильные стили после изменения размера окна

enter image description here

I ' Я пробовал три популярных браузера, и я продолжаю получать один и тот же результат.

Кто-нибудь имеет какие-либо идеи, что является причиной этого и как его решить? или это поведение сохраняется в производстве!?

1 Ответ

0 голосов
/ 06 февраля 2020

Не могли бы вы попробовать переопределить pages/_document.js? 

import Document, {Head, Main, NextScript} from 'next/document';
import React from 'react';

class MyDocument extends Document {
    render() {
        return (
            <html lang="en">
                <Head>
                    <meta charSet="UTF-8" />
                    <meta content="IE=edge" httpEquiv="X-UA-Compatible" />
                    <meta content="width=device-width, initial-scale=1" name="viewport" />
                    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
                </Head>
                <body>
                    <Main />
                    <NextScript />
                </body>
            </html>
        );
    }
}

export default MyDocument;

Это будет включать в себя файл Bootstrap CSS из CDN с первоначальным запросом от сервера.

...