_app.js在nextjs中导入的位置(反应)

时间:2020-01-02 17:50:06

标签: reactjs store next.js provider

我发现了这样的示例(https://github.com/zeit/next.js/tree/canary/examples/with-app-layout)来全局覆盖_app.js,但是我没有找到它的导入位置,因此没有使用npm进行编译。我想使用相同的CSS并存储在不同的页面中。我该如何导入/解决它,或者可以使用什么呢?

_app.js

import React from 'react'
import App, { Container } from 'next/app'
import Head from 'next/head'
import LoadingBar from '../components/loadingbar.js'

import { Provider } from 'mobx-react'

import 'bootstrap/dist/css/bootstrap.min.css'
import 'font-awesome/css/font-awesome.min.css'
import 'toastr/build/toastr.min.css'
import 'bootstrap-toggle/css/bootstrap2-toggle.min.css'
import '../public/skins/darkly.min.css'

import AuthStore from '../store/AuthStore.js'
import ServerStore from '../store/ServerStore.js'
import LoadingStore from '../store/LoadingStore.js'

export default class MyApp extends App {

    render() {

        loadingStore = new LoadingStore()
        serverStore = new ServerStore(loadingStore)
        authStore = new AuthStore(loadingStore)

        const { Component, pageProps, serverStore } = this.props

        return (
            <div>
                <Provider loadingStore={loadingStore}>
                    <LoadingBar loadingStore={loadingStore}></LoadingBar>
                    <Provider authStore={authStore}>
                        <Provider serverStore={serverStore}>
                            <Component {...pageProps} />
                        </Provider>
                    </Provider>
                </Provider>

                <style jsx="true">{`
                    .highlight {
                    background: var(--orange);
                    color: var(--white);
                    border-radius: .2rem;
                    }

                    .btn-xs {
                    font-size: 12px
                    }
                `}</style>
            </div>
        )
    }

}

index.js

import React from 'react'

const Index = () => {

  return 'index'
}

export default Index

0 个答案:

没有答案