import React from 'react' ; import App , { Container } from 'next/app' ; import Head from 'next/head' ; import { MuiThemeProvider } from '@material-ui/core/styles' ; import CssBaseline from '@material-ui/core/CssBaseline' ; import JssProvider from 'react-jss/lib/JssProvider' ; import Typography from '@material-ui/core/Typography' ; import "react-multi-carousel/lib/styles.css" ; import Menu from '../components/menu' ; import getPageContext from '../src/getPageContext' ; class MyApp extends App { constructor ( ) { super ( ) ; this . pageContext = getPageContext ( ) ; } componentDidMount ( ) { const jssStyles = document . querySelector ( '#jss-server-side' ) ; if ( jssStyles && jssStyles . parentNode ) { jssStyles . parentNode . removeChild ( jssStyles ) ; } } render ( ) { const { Component , pageProps } = this . props ; return ( < Container > < Head > < title > React - multi - carousel - w3js < /title> < /Head> { } < JssProvider registry = { this . pageContext . sheetsRegistry } generateClassName = { this . pageContext . generateClassName } > { } < MuiThemeProvider theme = { this . pageContext . theme } sheetsManager = { this . pageContext . sheetsManager } > { } < CssBaseline / > { } < Menu > < /Menu> < Component pageContext = { this . pageContext } { ... pageProps } /> < /MuiThemeProvider> < /JssProvider> < /Container>); } } export default MyApp ;